jq select 总结

最新推荐文章于 2023-03-07 16:30:09 发布

原创最新推荐文章于 2023-03-07 16:30:09 发布 · 665 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何使用jQuery操作下拉菜单，包括获取选中项、设置选中项、触发事件等关键操作，并提供示例代码帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/js/lib/jquery-1.10.2_d88366fd.js"></script>
<meta charset="utf-8">
<select id="slt">
  <option value="aaaa">aaaa</option>
  <option value="bbbb">bbbb</option>
  <option value="cccc">cccc</option>
</select>
<div id="jtests">获取内容</div>
<div id="jtests_set">设置内容</div>
<script type="text/javascript">
  $('#jtests').on('click', function() {
    //获取选中项
    var $slt=$("#slt").find("option:selected");
    alert(    '选中项html' + $slt.prop('outerHTML')   );
    //选中项下标
    var index=$("#slt").get(0).selectedIndex;
    alert(    '选中项下标：' + index   );
    //根据属性值获取下标
    var index=$("#slt").find('option[value="cccc"]').index();
    alert(    '属性值获取下标：' + index   );
    //根据内容值获取下标
    var index=$("#slt").find('option:contains("cccc")').index();
    alert(    '根据内容值获取下标:' + index   );
    //获取所有下拉总数
    var index=$("#slt").get(0).options.length;
    alert(    '获取所有下拉总数:' + index   );
    //设置下标
    var index=$("#slt").get(0).selectedIndex=1;
  });
  //单击select事件
  $("#slt").on('change', function() {
    alert(    $(this).find('option:selected').text()   );
  });
  // 模拟触发事件
  $('#jtests_set').on('click', function() {
    $('#slt').trigger('change');
  });
</script>