jQuery的Select操作集合
fmms
13年前
<div class="BlogContent TextContent"> <span style="text-align:left;line-height:18px;font-family:verdana, 'ms song', 宋体, Arial, 微软雅黑, Helvetica, sans-serif;font-size:12px;"> <div class="div"> jQuery获取Select选择的Text和Value: <br /> 语法解释: <br /> 1. $("#select_id").change(function(){//code...}); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//为Select添加事件,当选择其中一项时触发</span> <br /> 2. var checkText=$("#select_id").find("option:selected").text(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//获取Select选择的Text</span> <br /> 3. var checkValue=$("#select_id").val(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//获取Select选择的Value</span> <br /> 4. var checkIndex=$("#select_id ").get(0).selectedIndex; <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//获取Select选择的索引值</span> <br /> <p>5. var maxIndex=$("#select_id option:last").attr("index"); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//获取Select最大的索引值</span></p> jQuery设置Select选择的Text和Value: <br /> 语法解释: <br /> 1. $("#select_id ").get(0).selectedIndex=1; <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//设置Select索引值为1的项选中</span> <br /> 2. $("#select_id ").val(4); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//设置Select的Value值为4的项选中</span> <br /> 3. $("#select_id option[text='jQuery']").attr("selected", true); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//设置Select的Text值为jQuery的项选中</span> <br /> <br /> </div> <div class="div"> jQuery添加/删除Select的Option项: <br /> 语法解释: <br /> 1. $("#select_id").append("<option value='Value'>Text</option>"); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//为Select追加一个Option(下拉项)</span> <br /> 2. $("#select_id").prepend("<option value='0'>请选择</option>"); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//为Select插入一个Option(第一个位置)</span> <br /> 3. $("#select_id option:last").remove(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//删除Select中索引值最大Option(最后一个)</span> <br /> 4. $("#select_id option[index='0']").remove(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//删除Select中索引值为0的Option(第一个)</span> <br /> 5. $("#select_id option[value='3']").remove(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//删除Select中Value='3'的Option</span> <br /> 5. $("#select_id option[text='4']").remove(); <span style="padding-bottom:0px;line-height:1.5em;margin:0px;padding-left:0px;padding-right:0px;color:green;padding-top:0px;">//删除Select中Text='4'的Option</span> </div> </span> </div>