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>