js/jquery中单选框、下拉框使用总结

最新推荐文章于 2020-12-10 11:30:20 发布

轮回韩

最新推荐文章于 2020-12-10 11:30:20 发布

阅读量686

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript/jQuery 文章标签： jquery javascript

本文链接：https://blog.youkuaiyun.com/lunhuihan/article/details/54310942

JavaScript/jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用jQuery和JavaScript来操作DOM元素，包括单选框、复选框及下拉框的选择状态获取与设置。重点讲解了prop()与attr()方法的区别，以及通过不同方法获取元素属性的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单选框

前言：jQuery中，prop()方法获取的是元素的属性（property）,而attr()获取的则是元素的特性(attribute)。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected 应使用.prop()方法进行取值或赋值。

<input type="checkbox" checked="checked" />  (此input假定为elem)

以下三种方式可以得到checkbox的选择状态：

1. elem.checked                     //boolean类型  
2. $(elem).prop('checked')          //boolean类型 
3. $(elem).is(':checked')           //boolean类型

$(elem).attr(‘checked’)只是设置复选框最初的值，并且也不会随着复选框状态的改变而改变，并且得到的值是string类型喔。
在html中的设置为checked=”checked”，而js/jQuery中的设置和判断为checked=true/false

下拉框

<select name="" id="select">
        <option value="v11">11</option>
        <option value="v12" >12</option>
        <option value="v13" selected>13</option>
</select>

js操作
1.获取选中项索引

   select.selectedIndex                             //2

2.获取选中项的value

   select.value                                     //v13

3.获取选中项的text

   select.options[select.selectedIndex].text        //13

4.替换特定项的value

   select.options[0].value=111                       //控制options

5.选中特定项

   select.selectedIndex=0;                          //控制索引
   select.options[0].value='v00';                    //控制选定值

6.清空option

   select.options.length=0                          //清空

jquery操作
1.获取选中项索引

   $('#select').find(':selected').index();          //2
   $('#select').get(0).selectedIndex;               //2

2.获取选中项的val

   $('#select').find(':selected').val();          //13
   $('#select').get(0).value;                     //13

3.设置val=xxx为选中项

   $('#select').find('option[value="v13"]').prop('selected',true);     //13

4.清空option

   $('#select').empty();     //13