select 中的 html selected 选项与我在 DOM 中看到的不同

Question

在 django 表单中，我为选择设置了默认选项。它没有在 UI 中显示这些更改，但在检查后我看到 DOM 实际上正在更改。当我在控制台中检查 HTML 时，我可以看到所选选项设置为 1，但是当我向 jquery 询问所选选项时，它给了我另一个选项。

$("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>​]
$("select[name=spread_format]").val()
"0"

我想要完成的是将 1 显示为默认值。此选择正在以引导模式呈现。

奇怪的是，UI 中的选定选项是“0”，而不是我的 DOM 所示的“1”。

Answer 1

为了获得所选选项的值，您应该使用val()，而不是搜索<option> 元素。

$('#btn1').click(function() {
  console.log($('#s1').val());  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
  <option value="1">A</option>
  <option value="2" selected="selected">B</option>
  <option value="3">C</option>
</select>
<br />
<button id="btn1">click</button>