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屬性定義是否應在pageload上選擇一個元素。如果您使用select元素髮布表單，則所選的選項將是發佈的選項，而不管最初選定的元素。

你需要什麼selected -attribute for your case？

編輯：根據您的意見，我做了一個小提琴

小提琴1https://jsfiddle.net/q3fpafov/1選擇像你想

小提琴2https://jsfiddle.net/bge9bsa7/2/僅顯示所選擇的語言文件可用

我希望它在某些方面符合你的要求。 當您重新加載時仍然選擇您的選項的原因是基於瀏覽器的。但是selected-attribute對於該選項的可用性沒有任何作用。此外，它不會改變，因爲您不會改變HTML元素本身呈現的方式（在頁面加載時）

Answer 2

注意：selected =「selected」不是必要的，只需選中屬性將工作以及。

當出現時，選擇屬性指定應該預先選擇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在更改時保存該值，並在頁面重新加載時從中讀取。 我已編輯片段，以反映這個（代碼簡化）

Answer 4

問題之前曾是該選擇一個選項，並重新加載頁面後，選擇了頁面重載期間被記住的，即使屬性selected指出，另一種選擇。

我通過每次調用下面的函數來解決它。該功能即使在頁面重新載入後也能找出真正選擇的選項。

<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>