jq select 总结

来源:互联网 发布:javascript和jsp 编辑:程序博客网 时间:2024/06/10 07:30
<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>
0 0
原创粉丝点击