Question

我有以下代码来创建表单输入字段，用户可以正常键入他们的搜索查询。但是，我也希望下拉选项成为此输入的一部分。我遇到的问题是，当用户从此下拉列表中选择一个选项时，输入字段中不会显示占位符文本，也不会更改输入文本以向用户显示他们刚刚从下拉列表中选择的内容。我试着编写一个小脚本来检测是否选择了li a并且它会相应地更新输入字段但是我有点卡住了。欢迎任何帮助。

    <form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control" placeholder="Search">
                            <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li class="input"><a href="#">black</a></li>
                                <li class="input"><a href="#">white</a></li>
                                <li class="input"><a href="#">red</a></li>
                                <li class="input"><a href="#">blue</a></li>
                                <li class="input"><a href="#">yellow</a></li>
                            </ul>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>

$('ul li a').on('select', function () {
     var selectedOption = $(this).find("placeholder").text();
     $(this).text(selectedOption);
})

Answer 1

这里有一个有效的jsfiddle

$('ul li a').on('click', function () {
     var selectedOption = $(this).text();

    $('.form-control').val(selectedOption);
})

Answer 2

试试这段代码：

 $('#color-dropdown-menu li').click( function () {
$('.form-control').attr('placeholder',$( this ).text());

});

HTML：

<form role="form">
        <div class="input-group">
            <div class="input-group-btn">
                            <input type="text" class="form-control" placeholder="Search">
                            <ul id="color-dropdown-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                                <li class="input"><a href="#">black</a></li>
                                <li class="input"><a href="#">white</a></li>
                                <li class="input"><a href="#">red</a></li>
                                <li class="input"><a href="#">blue</a></li>
                                <li class="input"><a href="#">yellow</a></li>
                            </ul>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
            </div>
        </div>
    </form>

CHECK IT

如何选择更新输入字段时如何创建下拉列表？

2 个答案: