Question

我需要在文本框中添加下拉列表，该列表应从列表中选择该选项。

我找到了html但它没有选择该选项，而是重定向到页面。 html代码如下。

<div class="form-group">
 <div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
   <button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown">Domain<span class="caret"></span></button>
   <ul class="dropdown-menu" role="menu">
    <li><a href="#">@gmail.com</a></li>
    <li><a href="#">@yahoo.com</a></li>
    <li><a href="#">@hotmail.com</a></li>
   </ul>
  </div>
 </div>
</div>

Answer 1

我假设您要选择@domain并更改按钮文字。

我使用了<select>和<option> html标记以及一些jQuery。

您的解决方案在此处：https://jsfiddle.net/urahara/qtr7hgn7/1/

HTML：

<div class="form-group">
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Domain<span class="caret"></span>

            </button>
            <ul class="dropdown-menu" role="menu">
                <select id="multiple" multiple="multiple">
                    <option>@gmail.com</option>
                    <option>@yahoo.com</option>
                    <option>@hotmail.com</option>
                </select>
            </ul>
        </div>
        </input>
    </div>

JavaScript的：

$(function () {
    $("select").change(function () {
        $("select option:selected").each(function () {
            $('button').html( $(this).text() );
        });
    });
});

如何在bootstrap中添加带有文本框的下拉列表，从dropbox中选择选项

1 个答案: