Question

我的页面上有多个选项，每个选项都有多个选项。但是，如果我选择一个选项，则该选项的属性selected不会更新。难道不会自动发生这种情况吗？！

示例：

＆＃13;

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

＆＃13;

通过使用开发者控制台检查DOM，您应该看到，即使选择了另一个选项，所选属性也不会改变。

但是我发现了一种解决方法。要解决此问题，我们可以使用以下代码：

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

示例：

＆＃13;

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

＆＃13;

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

＆＃13;

这种方式很有用。但是，如果我选择其他选项而不是默认选项，例如Chrome并重新加载页面，然后重新加载后仍然会选择Chrome选项，但所选属性仍然指向Internet Explorer！

解决此问题的最佳方法是什么？我的想法是浏览$(document).ready()上的所有选择，并选择所选属性指向的选项。

但为什么这一切都不会自动发生？这是一个错误还是一个功能？

Answer 1

selected属性定义是否应在 pageload 上选择元素。如果您发布带有select元素的表单，则无论选择的初始元素如何，所选的选项都将是已发布的选项。

在您的情况下，您需要selected - 属性吗？

编辑：根据您的评论，我做了一个小提琴

小提琴1 https://jsfiddle.net/q3fpafov/1选择您想要的内容

小提琴2 https://jsfiddle.net/bge9bsa7/2/仅显示所选语言的可用文件

我希望它能够满足您的需求。重新加载时仍然选择了您的选项的原因是基于浏览器。但是selected - 属性对选项的可用性没有任何作用。此外，它不会更改，因为您不会更改HTML元素本身的呈现方式（在页面加载时）

Answer 2

注意：select =“selected”不是必需的，只需 selected 属性也可以。

如果存在，则select属性指定当页面加载时，应选择中的选项。

此外，预先选择的选项将首先显示在下拉列表中。

那些2应该只是所选属性的效果。注意关键字 - 页面加载时。当浏览器加载页面时，他或不在场。

如果你想让它变得动态，你需要使用JavaScript。你想用这个做什么？在重新加载页面时是否在正确的元素上选择了属性，或者在页面加载后以编程方式选择正确的元素？

如果你只是想选择元素，那么通过任何一个值都可以更容易：

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

或者通过索引（介意，索引从0开始而不是1）：

function updateNestedState(state, action) { // Problem: this only does a shallow copy! let newState = {...state}; // ERROR: nestedState is still the same object! newState.nestedState.nestedField = action.data; return newState; }

Answer 3

您可以在value更改后查看select以查看其更改内容。

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指向另一个选项，也会在页面重新加载期间记住该选项。

我每次都通过调用下面的函数来解决它。该函数找出哪个是真正选择的选项，即使在页面重新加载后也是如此。

＆＃13;

<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>									
    <option value="link_2749">Chinese</option>
</select>

<button onclick="return showSelectedOption('select_179');">Show Option Text</button>

<script>
function showSelectedOption(pSelectID)
{
    var text;
    
     $("#"+pSelectID)
    	.find("option")
      .each(function(){
    		if ($(this).prop("selected")) {
        	
        	text = $(this).text();
        }
    });
    console.log(text);
}
</script>

＆＃13;

HTML - 选择选项的选定属性不会自动更新

4 个答案: