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

转载地址：http://fireflywithcat.iteye.com/blog/1581183

首先看html代码：

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

……都是自己测试过的！