选择表单的jQuery重置无法正常工作

Question

我有一个带有select标签的表单，默认情况下最初设置为空选项。对于他们我也有JavaScript，如果用户先前已经选择了该选项，则禁用该选项。

我想要做的是有一个重置所有按钮，如果用户想要将所有选项重置为默认值。这部分有效，但如果用户已经选择了一些选项并且JavaScript已禁用它们，则它们不会重置并且不再可选。请参阅JsFiddle。

JsFiddle：https://jsfiddle.net/qgob6k9m/4/

我的问题是，是否有办法重新启动以前选择的选项。无法重新启动页面，因为表单会再次发送。

谢谢！

＆＃13;

＆＃13;

var $selects = $('select');
$selects.on('change', function() {
  $("option", $selects).prop("disabled", false);
  $selects.each(function() {
    var $select = $(this),
      $options = $selects.not($select).find('option'),
      selectedText = $select.children('option:selected').text();
    $options.each(function() {
      if ($(this).text() == selectedText) $(this).prop("disabled",
        true);
    });
  });
});

$selects.eq(0).trigger('change');

$("#button").on("click", function() {
  $('#select1 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select2 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select3 option').prop('selected', function() {
    return this.defaultSelected;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="option" id="select1" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select2" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select3" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <input align="middle" id="button" type="button" value="Reset Form">
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您只需删除在选项标记上设置的已停用的attribut即可 这是您的项目与解决方案的小提琴

var $selects = $('select');
$selects.on('change', function() {
  $("option", $selects).prop("disabled", false);
  $selects.each(function() {
    var $select = $(this),
      $options = $selects.not($select).find('option'),
      selectedText = $select.children('option:selected').text();
    $options.each(function() {
      if ($(this).text() == selectedText) $(this).prop("disabled",
        true);
    });
  });
});

$selects.eq(0).trigger('change');

$("#button").on("click", function() {
  $('#select1 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select1 option').prop('disabled',false) // remove the disabled attribut
  $('#select2 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select2 option').prop('disabled',false) // remove the disabled attribut
  $('#select3 option').prop('selected', function() {
    return this.defaultSelected;
  });
  $('#select3 option').prop('disabled',false) // remove the disabled attribut
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select name="option" id="select1" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select2" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <select name="option" id="select3" size="1" required>
    <option value="" selected="selected" disabled hidden>Options</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>               
  </select>
  <input align="middle" id="button" type="button" value="Reset Form">
</form>

Answer 2

我认为这会解决问题

$("#button").on("click", function(){
    $('#select1 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
     $('#select2 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
     $('#select3 option').prop('selected', function(){
      return this.defaultSelected;
    }).prop('disabled', false);
  });