为什么我的JavaScript无法看到选择了哪个html选项

Question

我有一个html select-

<select name="startDay" id="startDay">
    <option value=​"01">​Sun 1​</option>​
    <option value=​"02">​Mon 2​</option>​
    <option value=​"03">​Tue 3​</option>​
    <option value=​"04">​Wed 4​</option>​
    <option value=​"05">​Thu 5​</option>​
    <option value=​"06">​Fri 6​</option>​
    <option value=​"07">​Sat 7​</option>​
    <option value=​"08" selected>​Sun 8​</option>​
    <option value=​"09">​Mon 9​</option>​
    <option value=​"10">​Tue 10​</option>​
    <option value=​"11">​Wed 11​</option>​
    <option value=​"12">​Thu 12​</option>​
    <option value=​"13">​Fri 13​</option>​
    <option value=​"14">​Sat 14​</option>​
    <option value=​"15">​Sun 15​</option>​
    <option value=​"16">​Mon 16​</option>​
    <option value=​"17">​Tue 17​</option>​
    <option value=​"18">​Wed 18​</option>​
    <option value=​"19">​Thu 19​</option>​
    <option value=​"20">​Fri 20​</option>​
    <option value=​"21">​Sat 21​</option>​
    <option value=​"22">​Sun 22​</option>​
    <option value=​"23">​Mon 23​</option>​
    <option value=​"24">​Tue 24​</option>​
    <option value=​"25">​Wed 25​</option>​
    <option value=​"26">​Thu 26​</option>​
    <option value=​"27">​Fri 27​</option>​
    <option value=​"28">​Sat 28​</option>​
</select>

当我在jsbin上使用此代码时，我可以使用jQuery识别选定的选项-

$('#startDay').val()

但是在我正在工作的网站上， http://test.mapov.com/?d=london 。 相同的代码失败-

> $('#startDay').val()
> null

我也无法用纯js获得任何东西-

> document.getElementById('startDay').options.selectedIndex
> -1

我检查了页面上是否没有其他具有该ID的元素。 然后将html剪切并粘贴到pasteBin（ http://jsbin.com/bivudinagu/1/edit?html,js,console ）中。 我只是对这里发生的事情一无所知。

这是从我的Chrome控制台-

> document.getElementById('startDay').options[7]
> <option value=​"08" selected>​Sun 8​</option>​
> document.getElementById('startDay').options[7].selected
> false

??！？

Answer 1

最初，您必须将一个ID设置为select ，

<select id="startDay">

然后，您可以通过以下方式获得所选选项的值：

$('#startDay option:selected').val()

 $(function(){ document.write($('#startDay option:selected').val()); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="startDay"> <option value="01">Sun 1</option> <option value="02">Mon 2</option> <option value="08" selected>Sun 8</option> </select> 

Answer 2

在您的问题和粘贴框中，您有

<option value="08" selected>8</option>

但是，在test.mapov.com的实际页面上，

<option selected="selected" value="08">8</option>

（查看页面源代码和检查DOM元素都显示了这一点）

在您实际网站上的Chrome浏览器的JavaScript控制台中，我得到以下信息

> $("#startDay").val();
null
> $("#startDay option:selected").val();
undefined

如果我篡改DOM，并将selected="selected"更改为just selected ，那么我得到

> $("#startDay").val();
"08"
> $("#startDay option:selected").val();
"08"

Answer 3

好的，我发现了问题。 jQuery允许您使用$('#el').val('non-existent-option')设置无效值，而不会引发错误或更新option元素以删除现有的selected属性。 我在打电话

$('#startDay').val(8) 

代码中的其他地方。 没有使用该值的<option> （正确的值是字符串'08' ）。 这并没有释放任何错误，我看不到有任何证据证明它会更新dom-

>  document.getElementById('startDay').options[7]
>  <option value=​"08" selected>​Sun 8​</option>​

但是，这使得$('#startDay').val()返回null 。