Question

jquery选择器select option

$("select option:[selected='selected']")这种组合的过滤器为什么不行呢，如果是这种结构选择到其他标签就可以：<div><input/></div>
写错了，没有那个冒号$("select option[selected='selected']")

Answer 1

应该使用

$('option:selected');

':selected'和$('[name="value"]')有什么区别呢:

1. ':selected'是jQuery扩展的选择器,并不属于CSS选择器规范,  仅适用于动态的获取选中的option. 请注意,你选中Select中的option时, 虽然select的状态发生了变化, 但html标记本身并不会变化. 

2. 而$('[name="value"]')的语法是jQuery的属性选择器, 遵循CSS选择器规范.  属性选择器是严格和html标记相匹配的, 举个例子: $('input[type="text"]')会命中<input type="text"> 但是不会命中<input >, 虽然后者默认是text. 

<select>
    <option>1<option>
    <option selected>2<option>
    <option>3<option>
</select>

$('option[selected]').text();
//页面加载后得到2
//手工选择1或者3后, 依然得到的是2. 选择select并不会修改html标记.

$('option[selected="selected"]').text();
//始终得到"", 虽然选项2的selected属性的确是selected, 但是请注意属性选择器是严格和html标记对应的.

$('option:selected').text();
//页面加载后得到2
//手工选择1得到1,选择3得到3. 正式期望的结果.这就是为什么jQuery会扩展出这个选择器.

追问

为什么这种的就可以正常执行呢？

$("input[value='测试']")

这个遵守了css选择器规范了吗？

Answer 2

$("select option:selected");         // 被选中的option

追问

$("select option[selected='selected']")这样写 和你那样写，的区别在哪里呢？

为什么这样写的时候就只能获取到在html代码中已经加上了selected='selected'的option？如果html代码本身没有加入selected属性，则单击option或者通过JQuery添加selected='selected'属性，通过$（）获取不到呢？