Question

我有一个html选择 -

<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

最初，您必须为select，

设置ID

<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

在你的问题中，在你的pastebin中，你有

<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"更改为selected，那么我

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

Answer 3

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

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

代码中的其他位置。这个值没有<option>（正确的值是字符串'08'）。这并没有发现任何错误，我也看不到任何更新dom的证据 -

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

然而，$('#startDay').val()正在离开null。

为什么我的javascript无法查看选择了哪个html选项

3 个答案: