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

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

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

来源

2016-08-18 Al-76

如果这些答案中的任何一个将您的问题标记修正为正确答案，请填写。 –

在这里，你有一个工作jsfiddle

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

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

来源

2016-08-18 15:24:51

试试这个代码：

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

来源

2016-08-18 15:44:51

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

回答

相关问题