如何将选项属性动态设置为“已选择”并在选择其他选项时删除

Question

好的，请在将其标记为重复之前阅读：

第一部分：我有一个选择列表。 每当我选择该特定选项时，我都需要动态设置。

第二部分：一旦完成，每当我从同一个选择列表中选择另一个选项时，我希望删除前一个选项的 selected 属性并将其设置为当前属性。

注意：我不在乎获得价值。 我只想设置“selected”属性，因为我会将它用于其他目的。

例如。 目前我选择了选项-Jquery

<select>
    <option selected="selected">Jquery</option>
    <option>Java</option>
    <option>JS</option>
</select>

所以下次我选择Java时，应该会发生以下情况：

<select>
    <option>Jquery</option>
    <option>Java</option>
    <option selected="selected">JS</option>
</select>

所以我尝试了以下似乎不起作用的方法：

//First remove the previous set attribute
$('select').click(function() {
    $(this).find('option:selected').removeAttr('selected');
});

//Set the newly selected option's attribute to selected
$('select').on('change', function() {
    $("option:selected").attr('selected','selected');
});

我怎样才能做到这一点？ Javascript/Jquery 解决方案，可用于任何类似的选择，而不是特定于这一选择。

Answer 1

使用属性选择器移除属性

:selected选择器基于 selected 属性而不是属性工作

 $('select').change(function(e){ $(this).find('[selected]').removeAttr('selected') $(this).find(':selected').attr('selected','selected') })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select> <option selected="selected">Jquery</option> <option>Java</option> <option>JS</option> </select>

Answer 2

错误的假设

属性/属性作为默认值

起初我认为这个问题是微不足道的，因为我自然地认为赋予标签的任何属性/属性都会很容易显示，因为它只是确认元素明显处于“状态”的东西（例如，复选框被选中一个用户，因此无需在其上使用.setAttribute() ，因此它具有已checked属性，因为它默认情况下应该已经拥有它。）

我的假设是错误的，默认情况下， checked 、 selected 、 disabled等属性都在标签上以设置初始“状态”。 因此，当用户选中复选框或从<select>元素选择<option>时，这些属性/属性不会神奇地显示出来。 处理这些属性的两种最有效方法是：

纯 JavaScript

使用set / get / remove / hasAttribute()方法族。

jQuery

使用.prop() / .removeProp()方法，不要使用.attr()

---

解决方案

以下部分讨论了 Demo 的重要部分：

var s = sel.options[sel.selectedIndex];

这个任务有两个部分：
这是一个HTMLOptionsCollection ，它类似于一个类似数组的 Object的NodeList 。

.options

后半部分是<select>和<option>标签独有的属性：

.selectedIndex

它本身返回给定<select>的第一个选定<option>的索引号，但结合前面提到的.options对象，我们有一个非常强大的工具来访问<select> ，定位选定的<option> ，并将其作为有用的 DOM 对象而不是索引号检索。

演示的其余部分使用for()循环、 Array.prototype.push() 、 .setAttribute() 、 .removeAttribute() 。 几乎忘记了 jQuery 函数侦听<select>上发生的“更改”事件：

 $('select').on('change', function(e) {...

---

演示

详细信息在演示中的每一行都有注释

 // Listen for change events on a <select> var s = $('select').on('change', function(sel) { // Empty array var sArr = []; // Dereferenced jQuery Object var sel = $('select')[0]; // options HTMLCollection with a selectedIndex property var s = sel.options[sel.selectedIndex]; // Total number of loops var sL = sel.length; // for() loop for (let S = 0; S < sL; S++) { // On each loop a selected attr is removed from each option sel[S].removeAttribute('selected'); // The empty array is loaded with only the first 3 loops if (S < 3) { sArr.push(sel[S]); } } // One option from the 3 in the short array gets a selected attr s.setAttribute('selected', 'selected'); // Clear console console.clear(); // Display selected option console.log(s); // Display all 3 options from the short array console.log(sArr); });

 .as-console-row-code { color: gold; background: #000; font-size: 21px; } .as-console-row { color: gold; background: #000; max-width: 15px; }

 <select> <option> jQuery </option> <option> JavaScript </option> <option> CSS </option> </select> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>