我如何创建一个下拉菜单，当选择更新输入字段

How do I create a dropdown that when selected updates an input field?

本文关键字：选择 更新 字段 输入 下拉菜单 何创建 创建 一个      更新时间：2023-09-26

我用下面的代码创建一个表单输入字段，用户可以像往常一样在其中键入他们的搜索查询。然而，我也想下拉选项是这个输入的一部分。我遇到的问题是，当用户从这个下拉菜单中选择一个选项时，输入字段中没有出现占位符文本，或者输入文本也不会更改以显示用户刚刚从下拉菜单中选择的内容。我试着写一个小脚本，它会检测如果一个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);
})

这里有一个工作的jsfield 

$('ul li a').on('click', function () {
     var selectedOption = $(this).text();
    $('.form-control').val(selectedOption);
})

试试下面的代码:

 $('#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

相关文章：