jquery之index与selectedIndex

最新推荐文章于 2020-10-16 14:31:19 发布

慢慢充实自己

最新推荐文章于 2020-10-16 14:31:19 发布

阅读量5.1k

点赞数

分类专栏：前端文章标签： jquery select 表单

本文链接：https://blog.csdn.net/u013289746/article/details/54316826

版权

前端专栏收录该内容

28 篇文章 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;

慢慢充实自己

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery之index与selectedIndex

jquery之index()与selectIndex
复制链接

扫一扫

专栏目录

jquery之index与selectedIndex

“相关推荐”对你有帮助么？