Jquery获取select标签的值、文本方式

首先看html代码:

<select multiple="multiple" id="select1" size=”5” name="dd">
<optgroup label="坑爹组合">
<option value="1" disabled="disabled">我勒个去!</option>
<option value="2">坑爹啊!</option>
</optgroup>
<option value="3">悲催啊!</option>
<option id=”si” selected="selected ” value="4">冬瓜!</option>
<option value="5">我去!</option>
</select>


先来说说<select>这个标签吧!
⑴ multiple这个属性是可以多选!它的写法就是:multiple="multiple"
⑵ size=”3”,就是这个select标签顶多可有3个option
⑶ disabled="disabled":这个属性就是禁止下拉框下拉!就是不能用了!
⑷ option中的seleted=”selected” 就是在初始化时,下拉框中显示的是这个option了!说白了就是默认选定了!
⑸ optgroup这个标签就是在option选项中分类,方便我们选择。但是这不是一个option!
⑹ disabled="disabled" 的意思就是禁止这个option选择,就是你只能看着 但是无法选择。很坑爹!
⑺ value属性就是value,没有什么用处,给服务器传送的时候就是value。

呵呵!写了这么多没用的,接下来写Jquery了!
⑴ $("#select1").find("option:selected").text()
这个意思就是选择<select>标签,然后find选择 option标签中带有selected属性的标签,最后获取这个标签的text内容,文中就是获取:“冬瓜!“
⑵ $("#select1").val()
就是获取上面提到的value值了,但是有一点得注意:如果在所有option中有默认值selected属性时,这时这句代码的结果就是这个option的value值。如果所用option中都没有selected属性,则会显示第一个option的value值。如果要是没有设定value就会显示text()内容。
文中:显示结果是“4”,如果把这行的value=“4”去掉,就会显示:“冬瓜!”
⑶ $("#si").attr("value","donggua");
$("#si ").val("donggua");
$("#si ").get(0).value = "donggua";
这个就不解释了!就是给option赋值!
⑷ $("#select1").get(0).options[3].value
Get(0)获取这个select的DOM对象,对其进行操作。这是对其值进行操作,可以把value改为text,对其text进行操作!也可以把selected替换了,不过返回的是:false或者true
⑸ $("#select1 option[text='坑爹啊!']").attr("selected", true)
这个都明白吧,设置selected属性
⑹ $("#select1 ").append("<option value='8' selected='selected'>donggua</option>");
Append都知道就是元素内部追加内容,这里我就是加入一行option的意思
⑺ $("#select1").prepend("<option value='9'>请选择</option>");
Prepend是预设的意思,在这里也是添加一行option的意思,跟上面的区别是。Prepend是在select的第一位添加,而append是在最后一位添加。
⑻ $("#select1 option:last").remove();//删除最后一行
$("#select1 option[value='4']").remove();//删除第四行
$("#san").remove(); //删除第三行;
$("#select1 ").empty(); //删除全部option
……都是自己测试过的!
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值