为什么我的选择值没有被重置？ “选定” attr/prop 的问题答案

【问题标题】：Why is my select value not being reset? Problem with "selected" attr/prop为什么我的选择值没有被重置？ “选定” attr/prop 的问题
【发布时间】：2023-03-15 03:42:05
【问题描述】：

var original_role = $('option:selected', '#user_role').val();

$('#role_cancel').click(function() {
//console.log(original_role);
  $('option:selected', '#user_role').removeAttr('selected'); //deselect current option
  $('#user_role').find('option[value="' + original_role + '"]').attr('selected'); //select original value
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div class="col-md-9">
    <select name="user_role" class="form-control" id="user_role">
      <option value="0">Ninguno</option>
      <option value="1">Admin</option>
      <option value="24">Secretario general</option>
      <option value="25">SecretarioExcursiones</option>
      <option value="26">Tesorería</option>
      <option value="27">Almacen</option>
      <option value="28">Coordinador</option>
      <option value="30">Reta</option>
      <option value="31">Invitado</option>
      <option value="32" selected="">Prospecto</option>
      <option value="33">Presidente</option>
      <option value="34">Eventos especiales</option>
      <option value="36">Guía</option>
      <option value="37">Soci@</option>
      <option value="38">Inivtado</option>
    </select>
  </div>
  
  <button id="role_cancel">
  RESET
  </button>
  
</div>

当按下 RESET 时，选择应该

从下拉列表中选择的任何选项中删除选定的 attr/prop
从下拉列表中选择最初选择的值（以可视方式和在 DOM 中进行更改）

到目前为止，这些都没有做。

【问题讨论】：

你可以使用$("#user_role").val(original_role)
我认为您链接到了错误的小提琴。它没有任何代码。
但是你应该使用var original_role = $("#user_role").val(); 不要使用selected 属性，这只是用于初始选择，一旦用户更改菜单就不会使用它。
如果您必须使用selected 属性，请使用.prop('selected', true)。见.prop() vs .attr()。
.attr('selected') attr() 的getter 形式，而不是setter 形式。

标签： javascript html jquery dom

【解决方案1】：

目前我设置为对按钮点击做出反应而不是点击选择，如果你愿意就替换它，只是认为这是你的初衷。

你还需要获取new_role，新的选中项在点击函数中被移除。正如 Barmar 在评论中所说，将其设置为 original_role。

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", () => {
  banner.toggleClass("alt")
})

var original_role = $('option:selected', '#user_role').val();
//console.log(original_role);

$('button').click(function() {
var new_role = $('option:selected', '#user_role').val();
    //console.log(new_role);
  $('#user_role option[value="'+new_role+'"]').remove();
  $("#user_role").val(original_role);
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <div class="col-md-9">
    <select name="user_role" class="form-control" id="user_role">
      <option value="0">Ninguno</option>
      <option value="1">Admin</option>
      <option value="24">Secretario general</option>
      <option value="25">SecretarioExcursiones</option>
      <option value="26">Tesorería</option>
      <option value="27">Almacen</option>
      <option value="28">Coordinador</option>
      <option value="30">Reta</option>
      <option value="31">Invitado</option>
      <option value="32" selected="">Prospecto</option>
      <option value="33">Presidente</option>
      <option value="34">Eventos especiales</option>
      <option value="36">Guía</option>
      <option value="37">Soci@</option>
      <option value="38">Inivtado</option>
    </select>
  </div>
  
  <button>
  asd
  </button>
  
</div>

【讨论】：