时间戳

首页 > 解决方案 > 显示 2 个下拉列表，而只有一个编码控件

html - 显示 2 个下拉列表，而只有一个编码控件

问题描述

大家好，我对下拉列表有疑问。我正在向模态弹出窗口添加一个 asp 下拉列表，我使用 bootstrap theam 但是当模态弹出时下拉列表显示 2 次。这张图片将告诉你如何。

在此处输入图像描述

这是 HTML 代码和

<div class="col-sm-2">
    <div class="form-group form-group-sm">
        <div class="form-line">
            <asp:DropDownList ID="cboGender" runat="server">
                <asp:ListItem>M</asp:ListItem>
                <asp:ListItem>F</asp:ListItem>
                <asp:ListItem>Other</asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
</div>

和来自浏览器的代码

<div class="form-group form-group-sm">
  <div class="form-line">
    <div class="btn-group bootstrap-select">
      <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown"
        data-id="MainContent_cboGender" title="Other">
        <span class="filter-option pull-left">Other</span>&nbsp;
        <span class="bs-caret">
          <span class="caret"></span>
        </span>
      </button>
      <div class="dropdown-menu open">
        <ul class="dropdown-menu inner" role="menu">
          <li data-original-index="0">
            <a tabindex="0" class="" style="" data-tokens="null">
              <span class="text">M</span>
              <span class="glyphicon glyphicon-ok check-mark"></span>
            </a></li>
          <li data-original-index="1" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span
                class="text">F</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
          <li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span
                class="text">Other</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
        </ul>
      </div><select name="ctl00$MainContent$cboGender" id="MainContent_cboGender" class="" tabindex="-98">
        <option value="M">M</option>
        <option selected="selected" value="F">F</option>
        <option value="Other">Other</option>

      </select>
    </div>
  </div>
</div>

请帮我解决这个问题

标签： htmlcssbootstrap-4bootstrap-modal

解决方案

第一个是使用 Bootstrap 完成的，但另一个可能是通过，

<select name="ctl00$MainContent$cboGender" id="MainContent_cboGender" class="" tabindex="-98">
    <option value="M">M</option>
    <option selected="selected" value="F">F</option>
    <option value="Other">Other</option>

推荐阅读