Question

我有几个选项的简单选择：

我的问题是，当我点击删除计划时，我的onchange事件开始了，我在选择窗口中看到它，而不是先禁用所选选项选择。如何在选择窗口中始终保持选择，让用户重新选择他们想要的任何选项而不实际选择＆＃34;它并在选择窗口中显示。

<select id = "actionslist">
    <option id="selectoption" disabled selected>Select</option>
    <option value = "Remove Plans">Remove Plans</option>
     <option value = "Something else">Something Else</option>
</select>

同样，我想＆＃34;选择＆＃34;总是显示，而不是用户点击的选项。但是，我不希望Select成为用户可以点击的选项之一。

这里的想法是确保onchange事件始终被踢，即使用户一直在反复选择相同的选项。

谢谢！

Answer 1

您可以在更改事件期间重置它。 $(this).prop('selectedIndex',0)。但是，您现在必须引用该值（基本上将其存储在变量中）。 select元素现在将具有原始值。

$( "#actionslist" ).bind( "change", function() {
  
  console.log(this.value)
  
  if (this.value === "Remove Plans") {
     //do something
  }

  $(this).prop('selectedIndex',0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "actionslist">
    <option id="selectoption" disabled selected>Select</option>
    <option value = "Remove Plans">Remove Plans</option>
     <option value = "Something else">Something Else</option>
</select>

Answer 2

这可以轻松完成 - 在更改功能结束时简单添加this.selectedIndex = 0;

＆＃13;

$('#actionslist').bind("change", function () {
    var item = $(this).val();
    console.log(item)
    if (item === "Remove Plans")
    {
      //do something
    }
    this.selectedIndex = 0;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id = "actionslist">
    <option id="selectoption" disabled selected>Select</option>
    <option value = "Remove Plans">Remove Plans</option>
     <option value = "Something else">Something Else</option>
</select>

＆＃13;

Answer 3

创建覆盖实际选择框的无法忽略的选择框是（快速，脏）解决方案之一。您必须注意确保它们重叠：

＆＃13;

$('#fakeActionslist').bind("change", function() {
  $('#actionslist').val($(this).val());
  $(this).val('');
  
  alert($('#actionslist').val()); // User's latest choice is saved in $('#actionslist').val()
});

＆＃13;

.select-container {
  position: relative;
}

#fakeActionslist {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-container">
  <select id="actionslist">
    <option value="" disabled selected>Select</option>
    <option value="Remove Plans">Remove Plans</option>
    <option value="Something else">Something Else</option>
  </select>
  <select id="fakeActionslist">
    <option value="" disabled selected>Select</option>
    <option value="Remove Plans">Remove Plans</option>
    <option value="Something else">Something Else</option>
  </select>
</div>

＆＃13;

在选择更改时始终显示第一个禁用选项

3 个答案: