好的,请在将其标记为重复之前阅读:
第一部分:我有一个选择列表。每当我选择该特定选项时,我都需要动态设置。
第二部分:完成此操作后,每当我从同一个选择列表中选择另一个选项时,我希望删除前一个选项的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解决方案,可用于任何类似的选择,而不是特定于此。
使用属性选择器删除属性
: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>
起初我认为这个问题是微不足道的,因为我自然地认为赋予标签的任何属性/属性都会很容易显示,因为它只是确认元素显然处于“状态”的东西(例如复选框是由一个用户,所以不需要在它上面使用.setAttribute()
,因此它具有checked
属性,因为它应该已经默认拥有它。)
我的假设是错误的,像checked
,selected
,disabled
等属性在标签上默认设置初始“状态”。因此,当用户选中复选框或从<option>
元素中选择<select>
时,这些属性/属性不会神奇地显现出来。处理这些属性/属性的两种最有效的方法是:
使用set
/ get
/ remove
/ hasAttribute()
方法族。
使用.prop()
/ .removeProp()
方法,do not use .attr()
以下部分讨论了以下演示的重要部分:
var s = sel.options[sel.selectedIndex];
这项任务分为两部分: 这是一个HTMLOptionsCollection,类似于NodeList的array-like Object。
.options
下半部分是<select>
和<option>
标签独有的属性:
它本身返回给定<option>
的第一个选定的<select>
的索引号,但结合前面提到的.options
对象,我们有一个非常强大的工具来访问<select>
,找到选定的<option>
,并将其作为一个有用的检索DOM对象而不是索引号。
演示的其余部分使用for()
loop,Array.prototype.push()
,.setAttribute()
,.removeAttribute()
。几乎忘记了在listened for a "change" event上发生的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>