错误的假设

Question

好的，因此请先继续阅读，然后将其标记为重复：

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

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

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

例如。目前，我选择了选项-jQuery

 if (intval($userid) === 1) {
   // admin 
   $mysqlstring = 'DELETE FROM postit WHERE id=?';
   $stmt = $link->prepare($mysqlstring);
   $stmt ->bind_param('i', $postitid);
 } else {
   $mysqlstring = 'DELETE FROM postit WHERE id=? AND users_id=?';
   $stmt = $link->prepare($mysqlstring);
   $stmt ->bind_param('ii', $postitid, $userid);
 }

 $stmt->execute();

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

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

所以我尝试了以下似乎无效的方法：

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

我该如何实现？可以用于任何类似选择的Javascript / Jquery解决方案，而不是特定于此选择的。

Answer 1

使用属性选择器删除属性

: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等属性在标签上默认设置为初始“状态”。因此，当用户选中复选框或从<option>元素中选择<select>时，这些属性/属性不会神奇地体现出来。处理这些属性/属性的两种最有效方法是：

普通JavaScript

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

jQuery

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

解决方案

以下部分讨论了此演示中的重要部分：

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

此作业有两个部分：
这是一个HTMLOptionsCollection，类似于NodeList中的array-like Object。

.options

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

.selectedIndex

它单独返回给定<option>中第一个选定的<select>的索引号， but 结合先前提到的.options对象，我们有一个非常强大的工具来访问<select>，找到所选的<option>，并将其作为有用的DOM对象而不是索引号进行检索。

该演示的其余部分使用for() loop，Array.prototype.push()，.setAttribute()，.removeAttribute()。几乎忘记了<select>上出现了jQuery函数listened for a "change" event：

   $('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>

如何将选项属性动态设置为“选定”，以及如何在选择其他选项时将其删除

2 个答案:

错误的假设

属性/属性为默认值

普通JavaScript

jQuery

解决方案

演示