如何标记下拉列表，以便第一项不是标签，并且可能在里面有一个输入字段答案

【问题标题】：How to label a dropdown so first item is not the label and possibly having a input field inside如何标记下拉列表，以便第一项不是标签，并且可能在里面有一个输入字段
【发布时间】：2015-12-29 16:25:23
【问题描述】：

我希望这个下拉框有一个标签“选择某某...”，当用户按下插入符号时，会显示下拉列表，并且该列表上的第一项是空白选择而不是标签名称.我将如何做到这一点？有没有办法在里面放一个输入框？下拉菜单基本上是一个运算符选择器、“=、”和一个美元金额。这样当我执行此操作时，它将在 SQL 中搜索金额等于、小于或大于所选金额的申请。

<select class="btn btn-info dropdown-toggle" style="width: 100px" ng-model="selectedOperator">
   <option label="Amount"></option>
   <option value="=">equal to</option>
   <option value="<">less than</option>
   <option value=">">greater than</option>
</select>
&nbsp;&nbsp;&nbsp;
<input class="form-control" type="text"/>

【问题讨论】：

标签： jquery html angularjs twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

您可以使用引导下拉菜单来执行此操作。您只需确保下拉菜单不会在输入字段获得焦点后立即关闭。

这是一个例子，相信你会明白的。

// get the needed elements.
var dd = $('#dd'),
    oprtrBtns = $('a[data-operatorType]');


function oprtrBtnsHndl () {
  var crntOprtr = $(this).attr('data-operatorType'),
      amount = $('#amount').val();

  // do what ever needs to be done.
  $('.output').text('select * from table where foo ' + crntOprtr + ' ' + amount);

}

// listen for the dropdown hide event 
dd.on('hide.bs.dropdown', function () {
  var $amountInput = $(this).find('#amount');
  
  // making sure the dropdown-menu will not close
  // when focusing the input field.
  if($amountInput.is(":focus")) {
    return false;
  }
  
});

// add click handler to your dropdown-menu buttons.
oprtrBtns.on('click', oprtrBtnsHndl);

body {
  margin-top: 10px;
}

.dropdown-menu li {
  padding: 0 12px;
}

a[data-operatorType] {
  margin-bottom: 10px; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="dropdown" id="dd">
        <button class="btn btn-primary btn-block dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          Select
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
          <li class="dropdown-header">
            <div class="input-group">
              <span class="input-group-addon">$</span>
              <input type="text" id="amount" class="form-control" aria-label="Amount" value="">
            </div>      
          </li>
          <li role="separator" class="divider"></li>
          <li><a class="btn btn-default" href="#" data-operatorType="=">equal to</a></li>
          <li><a class="btn btn-default" href="#" data-operatorType="<">less than</a></li>
          <li><a class="btn btn-default" href="#" data-operatorType=">">greater than</a></li>
        </ul>
      </div>      
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-xs-12">
      <p class="output well text-muted text-center"></p>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

要实现您想要的，您应该连接内置的Bootstrap 事件。见http://getbootstrap.com/javascript/#dropdowns-methods

我认为您想要的远远超出了dropdown 组件的范围。我建议改为专注于不同的方法，例如弹出一个modal，里面填满了控件。

【讨论】：