Question

我有一个要求，当我点击列表的元素时，元素会在选择框中显示为选定的选项

我只需要使用原生选择框，更不用说列表中的元素出现在选择下拉列表中

<button class="quick">QuickLink</button>

<div class="list">
<ul class="apps">
    <li>CAPM</li>
    <li>GCS</li>
    <li>GRS</li>
</ul>
</div>

<select class="xyz">
<option>CAPM</option>
<option>GRS</option>
<option>BDS</option>
<option>CCAS</option>
<option>WEDAT</option>
<option>SDP</option>
</select>

jsfiddle链接 - ＆gt; https://jsfiddle.net/8s31w4t9/

Answer 1

使用click绑定li事件并使用以下方法：

.text()

获取匹配元素集合中每个元素的组合文本内容，包括它们的后代，或者设置匹配元素的文本内容。
.val( value )

设置匹配元素集中每个元素的值。

代码的

$('.apps li').click(function () {
    //Get the text of clicked element
    var text = $(this).text();

    //Set the value of select 
    $('.xyz').val(text);
});

DEMO

Answer 2

首先，您希望click处理程序位于li上，而不是ul。其次，您最好使用val函数，并将列表中的文字指定为val的{{1}}：

select

Fiddle

Answer 3

检查出来：

$(function(){

   $('.apps li').click(function(){
       $clicked = $(this);
       $('.xyz option').each(function(){
           if ($(this).text() == $clicked.text()) {
              $(this).prop('selected', true);
           }
       });
    });
 });

Updated demo

Answer 4

这应该做的工作：

$(function(){
  $('.apps > li').click(function() {
    $('.xyz').val(this.innerHTML);
  });
});

Answer 5

$('.apps').on('click', 'li', function () {
    $('.xyz').val(this.innerHTML);

});

Answer 6

您可以使用数据属性来使代码灵活。如果您希望li对option元素的内容有不同的文字，该怎么办？

<ul data-select-target=".xyz">
    <li data-select-val="1">CAPM</li>
    <li data-select-val="2">GRS</li>
    <li data-select-val="3">BDS</li>
</ul>

<select class="xyz">
    <option value="1">CAPM</option>
    <option value="2">GRS</option>
    <option value="3">BDS</option>
    <option value="4">CCAS</option>
    <option value="5">WEDAT</option>
    <option value="6">SDP</option>
</select>

jQuery的：

$('[data-select-target] li').click(function(){
    var val = $(this).data('select-val');
    var target = $(this).closest('ul').data('select-target');
    $(target).val(val);
});

演示：JSFiddle

Answer 7

使用以下解决方案：

$(function(){
    $('.apps li').css("cursor","pointer")
    $('.apps li').click(function () {
    $('.xyz').val($(this).text());
    });
});

http://jsfiddle.net/z7s36noq/

如何使用jquery填充选择框？

7 个答案: