user1532587 user1532587 - 2 months ago 7
Javascript Question

html selected option in select differs of what I'm seeing in DOM

In a django form, I have set the default option for a select. It is not showing those changes in UI, but after inspecting I'm seeing that the DOM is actually being changed. When I check in the console for the HTML, I can see that the selected option is set to 1, but when I ask jquery for the selected option it gives me another.

$("select[name=spread_format] option")
[<option value=​"0">​in.​</option>​, <option value=​"1" selected=​"selected">​ft.​</option>​]
$("select[name=spread_format] option:selected")
[<option value=​"0">​in.​</option>​]

What I want to accomplish is to show 1 as default. This select is being rendered in a bootstrap modal.

Strange to notice that the selected option in UI is '0', not '1' as indicated my DOM.

enter image description here


In order to get the value of the selected option you should use val(), and not searching for the <option> element.

$('#btn1').click(function() {
<script src=""></script>
<select id="s1">
  <option value="1">A</option>
  <option value="2" selected="selected">B</option>
  <option value="3">C</option>
<br />
<button id="btn1">click</button>