晚上有时间,继续再写一点,我们来讲一下关于select表单的所有操作,在项目中还是有很多地方需要用到的。
讲select之前先讲一下index()的用法,很长时间之前用过一回,熟悉一下还是有用处的。
1.index()同级元素的index() 获得第一个匹配元素相对于其同胞元素的 index 位置。若没有时为-1(可用来判定元素是否存在);
2.$(selector).index(element) 获得元素相对于选择器的 index 位置。(该element必须有
selector属性,就例如一下代码,必须jquery(“#favorite”)必须有class属性才可以得出index)
强调一下:必须是同胞(即同一个父亲)
<body>
<div class="content">
<ul>
<li>Glen</li>
<li >Tane</li>
<li>John</li>
<li >Ralph</li>
</ul>
<ul>
<li class="hot">Tane</li>
<li class="hot" id="favorite">Glen</li>
<li>John</li>
<li >Ralph</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var val = $("#select_1").get(0).selectedIndex;
alert(val)
alert("exit"+$(".aa").index())
});
$(function(){
$("ul li").click(function() {
n = $(this).index();
alert("被点击的li标签的index顺序为:"+n+");
});
alert($(".hot").index($("#favorite")));
});
</script>
</body>
了解了index,接下来讲一下selectedIndex:
从代码中可以清晰的看到取得index的方法以及对于选中select某一个值的几种方法:
<div>
<select id="select_1">
<option>aa</option>
<option>bb</option>
<option>cc</option>
</select>
</div>
<script type="text/javascript">
$(function(){
//获取选中元素的索引
var val = $("#select_1").get(0).selectedIndex;
alert(val)
var val1 = $("#select_1 option:selected").prop("index");
alert(val1);
//获取最后一个元素的索引值
var maxIndex=$("#select_id option:last").attr("index");
alert(maxIndex);
});
$(function(){
$("#select_1").get(0).selectedIndex=2;//index为索引值
$("#select_1").prop("value","bb");
$("#select_1").val("aa");
$("#select_1").get(0).value = "cc";
});
$(function(){
//设置select option项:
$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option
});
</script>
设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值
设置select 选中的value:
$("#ddlRegType ").attr("value","Normal“);
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;