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

Question

I've got an 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>

When I use this code on jsbin I can identify the selected option with jQuery -

$('#startDay').val()

But on the site I'm working on, http://test.mapov.com/?d=london . The same code fails -

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

I can't get anything with pure js either -

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

I've checked that there's no other element with that ID on the page. And I cut and paste the html into pasteBin ( http://jsbin.com/bivudinagu/1/edit?html,js,console ). I just can't make any sense of what's going on here.

This is from my chrome console -

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

??!?

Answer 1

Initially, you have to set an id to your select ,

<select id="startDay">

Then you can get the value of the selected option as:

$('#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

Here in your question, and in your pastebin, you have

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

However, on your actual page on test.mapov.com you have

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

(viewing page source and inspecting the DOM element both showed this)

In my javascript console in Chrome on your actual site I get the following

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

If I tamper with the DOM and change selected="selected" into just selected , then I get

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

Answer 3

OK, I found the problem. Jquery allows you to set an invalid value with $('#el').val('non-existent-option') , without throwing an error or updating the option elements to remove the existing selected attribute. I was calling

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

Somewhere else in the code. There wasn't an <option> with this value (the correct value was a string '08' ). This wasn't giving off any error's and I couldn't see any evidence of it updating the dom -

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

It was however leaving $('#startDay').val() returning null .