使用jquery在选择框中填充值和文本

Question

当我单击列表的元素时,该元素将在选择框中显示为选定的选项

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

但问题是,当标签中有value属性时,我会工作<option>.我想通过单击按钮更改选择框中的文本和值

代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <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 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>GCS</option>
</select>

jquery:

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

小提琴链接 - > https://jsfiddle.net/2jqfpjLk/1/

这是最后的工作小提琴

https://jsfiddle.net/aoxrLyet/3/

Answer 1

您需要按文本设置选项,因为li text是选项的文本而不是其值:

$('.apps li').click(function () {
    litext = $(this).text();
    $('.xyz option').filter(function () { 
              return $(this).html() == litext;
    }).attr('selected', true);
});

工作演示