jQuery之select
程序员文章站
2022-06-10 09:50:10
...
话不多说,详见代码吧
网页代码
网页代码
<div style="width:400px;height:100%;border: 1px black solid;background: white;margin-left: 30%;margin-top: 15%;padding-left:20px;padding-top:20px;"> <h1>Select示例</h1> <select id="address"> <option value="00">北京</option> <option value="01">成都</option> <option value="02">昆明</option> </select> <br> <input type="button" id="test1" value="设置下标: 1 被选中"/><br> <input type="button" id="test2" value="设置文本: 成都 被选中"/><br> <input type="button" id="test3" value="获取选中的下标"/><br> <input type="button" id="test4" value="获取选中的值"/><br> <input type="button" id="test5" value="获取选中的文本"/><br> <input type="button" id="test6" value="获取最大索引值"/><br> <input type="button" id="test7" value="获取下标02选中"/><br> <input type="button" id="test8" value="添加到最后一个option项:03-青海"/><br> <input type="button" id="test9" value="添加到最前一个option项:05-云南"/><br> <input type="button" id="test10" value="删除到最前一个option项:云南"/><br> <input type="button" id="test11" value="删除到最后一个option项:青海"/><br> <input type="button" id="test12" value="删除value=03的青海option"/><br> <input type="button" id="test13" value="删除文本=云南的option"/><br> <p><a href="index.jsp">返回</a></p> </div>
<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript" > $(function(){ $("#test1").click(function(){ $("#address ").get(0).selectedIndex = 1; }); $("#test2").click(function(){ $("#address>option").each(function(index){ if(this.text == "成都"){ this.selected = true; } }); }); $("#test3").click(function(){ alert($("#address").get(0).selectedIndex); }); $("#test4").click(function(){ //alert($("#address").find("option:selected").val()); alert($("#address").val()); }); $("#test5").click(function(){ //alert($("#address").find("option:selected").text()); alert($("#address>option:selected").text()); }); $("#test6").click(function(){ //alert($("#address>option:last")[0].index); alert($("#address>option:last").index()); }); $("#test7").click(function(){ $("#address>option").each(function(index){ if(this.value == "02"){ this.selected = true; } }); }); $("#test8").click(function(){ $("#address").append("<option value='03'>青海</option>"); $("#address").get(0).selectedIndex =$("#address>option").length-1; }); $("#test9").click(function(){ $("#address").prepend("<option value='05'>云南</option>"); $("#address").get(0).selectedIndex = 0; }); $("#test10").click(function(){ var firstIndex=$("#address>option:first").index(); // alert("firstIndex: " + firstIndex); $("#address>option[index=0]").remove(); //$("#address>option:first").remove(); //删除Select中索引值为0的 Option(第一个) }); $("#test11").click(function(){ var maxIndex = $("#address>option:last").index(); $("#address>option[index="+maxIndex+"]").remove(); // $("#address>option:last").remove(); //删除Select中索引值最大Option(最 后一个) }); $("#test12").click(function(){ // $("#address>option[value='03']").remove(); $("#address option:[value='03']").remove(); }); $("#test13").click(function(){ $("#address>option:[text='云南']").remove(); //删除所有子项 //$("#address>option").remove(); }); }) </script>