选择<选项>基于一个值

select <option> based on a value

本文关键字：于一个 选项 lt 选择 gt      更新时间：2023-09-26

我有以下html结构

<div>
 <select>
   <option value="">select</option>
   <option value="blue">blue</option>
   <option value="red">red</option>
   <option value="orange">orange</option>
   <option value="green">green</option>    
 </select>
 <ul>
  <li>blue</li>
  <li>red</li>
  <li>orange</li>
  <li>green</li>
 </ul>
</div>

我希望当用户单击<li>时，应该自动从<select>中选择适当的<option>，

将一个点击事件处理程序附加到每个li元素，该元素获取li的内容并使用它来设置select元素的值：

$('ul > li').on('click', function() {
    $('select').val( $.trim( $(this).text() ) );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
 <select>
   <option value="">select</option>
   <option value="blue">blue</option>
   <option value="red">red</option>
   <option value="orange">orange</option>
   <option value="green">green</option>    
 </select>
 <ul>
  <li>blue</li>
  <li>red</li>
  <li>orange</li>
  <li>green</li>
 </ul>
</div>

类似的东西？：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/wg36ehoq/1/

$('ul li').click(function(){
    $('select').val($(this).text());
});

由于空白在HTML文本中很常见，您可能也希望使用$.trim()：

$('ul li').click(function(){
    $('select').val($.trim($(this).text()));
});

或者您可以尝试以下方式：

$("ul").children().click(function(){
    $("select").find("[value='"+ $(this).text() +"']").prop('selected', true);
})

Fiddle：http://jsfiddle.net/12qn84hb/

相关文章：