選択したプロパティが選択オブジェクト内に設定されていません

Question

jQueryを使用してドロップダウンリストの値を変更したいとします。以下JSで

<select id="id145" name="id145" class="dropdown" > 
    <option selected="selected" value="0">1 - test</option> 
    <option value="1">2 - test</option> 
</select> 

：私は次のコードを使用

$('[name=id145] option').filter(function() { 
    return ($(this).val() == '1'); 
}).prop('selected', true); 

私は私のドロップダウンリスト内の値1ことを確認（2 - テスト）が選択されているが、私はソースコードを見たときに、

：

<option selected="selected" value="0">1 - test</option> 
<option value="1">2 - test</option> 

私が見に期待したもの

、および発生しません、このです：インスペクタツールを使用して、私はまだこれが見0

<option value="0">1 - test</option> 
<option selected="selected" value="1">2 - test</option> 

なぜ誰が知っていますか？これも可能ですか？

DEMO HERE

Answer 1

あなたはまだ最初のオプションではなく、第二にselected="selected"を見ている（例えば、選択を右クリックして「要素を点検」を選択）でも、DOMインスペクタを使用していることを言いました。

selected属性は、optionのデフォルト状態をに設定します。それは必ずしもその現在の状態を反映していません。 the specificationから：

selected属性はブール値属性です。それは要素のデフォルト選択を表します。あなたの現在の状態ではなく、属性を告げる

（私の強調）

要素のselectedプロパティ。 input要素のvalue属性（現在の値ではなくのデフォルト値は）も同様です。そのselectボックスがformにあり、フォーム上でresetという名前を付けた場合、最初のオプションが再び選択されます。これは、これが選択ボックスのデフォルトだからです。

オプションがであるかどうかを確認するには、現在が選択されているかどうかを知りたい場合は、その情報を属性レベルで使用することはできません。代わりにプロパティを検査する必要があります。

$('[name=id145]').val('1'); 
 
$("[name=id145] option").each(function() { 
 
    console.log("Option " + this.value + ": Selected? " + this.selected); // or $(this).prop("selected") 
 
});

<select id="id145" name="id145" class="dropdown" > 
 
    <option selected="selected" value="0">1 - test</option> 
 
    <option value="1">2 - test</option> 
 
</select> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>