HTML - 選択したオプションの属性が自動的に更新されない

Question

私のページに複数の選択肢があり、それぞれに複数のオプションがあります。 ただし、オプションを選択すると、そのオプションの属性selectedは更新されません。これは自動的に起こらないはずですか？

例：

<select id="browsers"> 
 
    <option value="Firefox">Bing</option> 
 
    <option value="InternetExplorer" selected="selected">Internet Explorer</option> 
 
    <option value="Chrome">Chrome</option> 
 
</select>

デベロッパーコンソールでDOMを検査することで、あなたが選択した属性にも別のオプションを選択した後に変更されていないことを、表示されるはずです。

しかし、私は回避策を見つけました。

$(document).on("change","select",function() { 
    $("option[value=" + this.value + "]", this) 
     .attr("selected", true).siblings() 
     .removeAttr("selected") 
}); 

---

例：：これは一種の作品

$(document).on("change","select",function() { 
 
    \t $("option[value=" + this.value + "]", this) 
 
    \t \t .attr("selected", true).siblings() 
 
    \t \t .removeAttr("selected") 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="browsers"> 
 
     <option value="Firefox">Bing</option> 
 
     <option value="InternetExplorer" selected="selected">Internet Explorer</option> 
 
     <option value="Chrome">Chrome</option> 
 
    </select>

この問題を解決するために、我々はこのコードを使用することができます。ただし、デフォルトオプション以外のオプションを選択した場合、たとえばChromeを使用してページをリロードすると、リロード後もChromeが選択されていますが、選択した属性は引き続きInternet Explorerを指しています。

これを解決する最善のアプローチはどれですか？ 私の考えは、$(document).ready()のすべての選択を実行し、選択した属性がポイントするオプションを選択することです。

しかし、なぜこれは自動的には起こりませんか？ バグですか、機能ですか？

Answer 1

selected属性は、ページロードで要素を選択する必要があるかどうかを定義します。 select要素を含むフォームを投稿すると、最初に選択した要素に関係なく、選択したオプションが投稿されたオプションになります。

selectedあなたの場合、何のために属性が必要ですか？

編集：あなたのコメントに基づいて私はあなたが選択した言語で利用可能な

フィドル2https://jsfiddle.net/bge9bsa7/2/ファイルのみが

を示しているしたいよう

フィドル1https://jsfiddle.net/q3fpafov/1を選択フィドルを作りました

私はそれがあなたが探している線のどこかにいることを願っています。 リロード時にオプションが選択されている理由は、ブラウザベースです。しかし、selected -attributeはオプションの有用性について何もしません。また、HTML要素自体がレンダリングされる方法（ページの読み込み時）を変更しないため、変更されません。

Answer 2

注：selected = "selected"は必要ありません。が選択されました属性が有効です同じように。

この属性が存在する場合、select属性では、がロードされたときにselect内のオプションが事前選択されるように指定します。を指定します。

事前に選択したオプションが最初にドロップダウンリストに表示されます。

これらの2つは、選択した属性の効果のみである必要があります。 キーワード - ページが読み込まれたときに注意してください。ブラウザがページを読み込んだときに彼はそこにいるかどうかです。

動的にするには、JavaScriptを使用する必要があります。これで何を達成したいですか？ページをリロードするときに正しい要素で属性を選択するか、ページがロードされた後にプログラムで正しい要素を選択しますか？

jQuery("#browsers[value='the value of the one you like']").attr('selected','selected'); 

またはインデックスによって

（心は、インデックスが0で起動しない1）：

document.getElementById("browsers").selectedIndex = "2"; 

Answer 3

あなたがチェックすることができますが、単にたく作る場合

は、要素はもっと簡単な方法トラフ値のいずれかが選択され何が変更されたかを確認するために変更するとselectのvalueが表示されます。

var select = document.getElementById('browsers'); 
 
select.addEventListener('change', function(e) { 
 
    localStorage.setItem('browser', this.value); 
 
}); 
 

 
var browser = localStorage.getItem('browser'); 
 
if (browser) { 
 
    select.value = browser; 
 
}

<select id="browsers"> 
 
    <option value="Firefox">Firefox</option> 
 
    <option value="InternetExplorer" selected="selected">Internet Explorer</option> 
 
    <option value="Chrome">Chrome</option> 
 
</select>

編集ので

、私は希望、ページがリロードされたときに、それが解消されないように値を格納し、OPのユースケースに応じて、約一部を逃しました値が変更されたときに値を保存し、ページがリロードされたときに値を読み取るにはlocalStorageを使用することを推奨します。 私は前の問題は、属性selectedは別のオプションを指摘していても、オプションを選択し、ページを再読み込みした後、オプションは、ページのリロード時に思い出したことがあった（コードは単純化されている）

Answer 4

をこれを反映するためのスニペットを編集しました。

毎回以下の関数を呼び出すことで解決しました。この関数は、実際に選択されたオプションがページリロード後であってもであることを検出します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="downloadSelect" id="select_179"> 
 
    <option value="-">Please select</option> 
 
    <option value="link_2748" selected="selected">Deutsch</option> \t \t \t \t \t \t \t \t \t 
 
    <option value="link_2749">Chinese</option> 
 
</select> 
 

 
<button onclick="return showSelectedOption('select_179');">Show Option Text</button> 
 

 
<script> 
 
function showSelectedOption(pSelectID) 
 
{ 
 
    var text; 
 
    
 
    $("#"+pSelectID) 
 
    \t .find("option") 
 
     .each(function(){ 
 
    \t \t if ($(this).prop("selected")) { 
 
     \t 
 
     \t text = $(this).text(); 
 
     } 
 
    }); 
 
    console.log(text); 
 
} 
 
</script>