Question

我有以下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>时，<option>中相应的<select>会自动被选中，

Answer 1

这样的东西？：

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

Answer 2

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

或者您可以尝试这种方式：

$("ul").children().click(function(){

    $("select").find("[value='"+ $(this).text() +"']").prop('selected', true);

})

小提琴：http://jsfiddle.net/12qn84hb/

根据值</option>选择<option>

3 个答案: