selectでhtmlで選択されたオプションがDOMで見ているものと異なります

Question

django形式では、selectのデフォルトオプションを設定しました。 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」で、「1」でないことがわかりました。私のDOMを示しています。選択されたオプションの値を取得するために

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>