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

问题描述 投票:1回答:2

好的,请在将其标记为重复之前阅读:

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

第二部分:完成此操作后,每当我从同一个选择列表中选择另一个选项时,我希望删除前一个选项的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解决方案,可用于任何类似的选择,而不是特定于此。

javascript jquery
2个回答
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>

0
投票

Wrong Assumption

属性/属性为默认值

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

我的假设是错误的,像checkedselecteddisabled等属性在标签上默认设置初始“状态”。因此,当用户选中复选框或从<option>元素中选择<select>时,这些属性/属性不会神奇地显现出来。处理这些属性/属性的两种最有效的方法是:

Plain JavaScript

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

jQuery

使用.prop() / .removeProp()方法,do not use .attr()


以下部分讨论了以下演示的重要部分:

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

这项任务分为两部分: 这是一个HTMLOptionsCollection,类似于NodeListarray-like Object

.options

下半部分是<select><option>标签独有的属性:

.selectedIndex

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

演示的其余部分使用for() loopArray.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>
© www.soinside.com 2019 - 2024. All rights reserved.