教程集 www.jiaochengji.com
教程集 >  jQuery  >  jquery 教程  >  正文 jQuery 操作下拉列表框的代码举例

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

发布时间:2015-10-25   编辑:jiaochengji.com
本文介绍下,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();

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

您可能感兴趣的文章:
利用jquery操作select下拉列表框的代码
jQuery 操作下拉列表框的代码举例
jQuery 操作下拉列表框实现代码
JQuery 文本框操作的4个小例子
jQuery 操作下拉列表框的实例分享
jquery easyui自定义下拉框列表
jquery 操作input标签方法大全
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
JQuery 常用操作代码
js下拉列表框操作示例总结

[关闭]
~ ~