jQuery 操作下拉列表框的代码举例

发布时间:2020-04-30编辑:脚本学堂
本文介绍下,jquery操作下拉开表框select的实例代码,有需要的朋友,可以参考学习下。

假如,有如下的下拉列表框:
 

<select name="select1" id="select1" size="10">
  <option value="1">脚本学堂1</option>
 <option valeu="2">脚本学堂2</option>
 <option value="3">脚本学堂3</option>
 <option value="4">脚本学堂4</option>
</select>

以下是jquery对其进行的各种操作代码,供大家参考。
 

复制代码 代码示例:

//取得jQuery对象
obj = $('#select1');

//取得Options 的长度
len = $('#select1 option').length

//遍历option
for (var i = 0; i < len; i++) {
  option_value = obj[0].options[i].value;
  option_text = obj[0].options[i].text;
}

//取得所选值
obj_value = $('#select1').val();

//取得所选值对应的text
obj_text = obj[0].options[obj[0].selectedIndex].text;

//添加一个option
obj.append('<option value="5">Option5</option>');

//删除一个option
$('#select1 option[value="1"]').remove();

有兴趣的朋友,可以亲自动手测试下,看看效果如何?
脚本学堂,祝大家学习进步哦。