jquery之index与selectedIndex

叁歲伎倆 2022-07-13 13:13 62阅读 0赞

晚上有时间，继续再写一点，我们来讲一下关于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;