Question

我希望这个下拉框有一个标签＆＃34;选择这样......＆＃34;当用户按下carret时，显示下拉列表，该列表中的第一项是空白选择，而不是标签名称。我怎么做到这一点？有没有办法把输入框放进去？下拉列表基本上是一个操作员选择器，＆＃34; =，＆lt;，＆gt;＆＃34;和一美元金额。这样，当我这样做时，它将在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"/>

Answer 1

您可以使用bootstraps下拉列表执行此操作。只需确保输入字段获得焦点后，下拉菜单就不会关闭。

这是一个例子，确定你会得到这个想法。

＆＃13;

// 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);

＆＃13;

body {
  margin-top: 10px;
}

.dropdown-menu li {
  padding: 0 12px;
}

a[data-operatorType] {
  margin-bottom: 10px; 
}

＆＃13;

<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>

＆＃13;

Answer 2

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

我认为你想要的东西超出了dropdown组件的范围。我建议改为关注不同的方法，例如弹出一个填充了控件的modal。

如何标记下拉列表，因此第一项不是标签，并且可能在其中包含输入字段

2 个答案: