如果选择了另一个选项，则恢复为原始下拉值答案

【问题标题】：Revert to original dropdown value if another option is selected如果选择了另一个选项，则恢复为原始下拉值
【发布时间】：2018-01-15 18:08:15
【问题描述】：

如果选择了特定的其他选项，我需要一个包含 10 个选项的下拉列表，以恢复为 value="none" 起始选项。如何使用 selectedIndex 获取下拉列表的值？

以下代码有效，但我想获取 selectedIndex 的值 -

var ddOptions = document.getElementById("divID").options;
    if (ddOptions.selectedIndex == 2 || ddOptions.selectedIndex == 3 || ddOptions.selectedIndex == 4 || ddOptions.selectedIndex == 7 || ddOptions.selectedIndex == 8)
    ddOptions.selectedIndex = 0;

这是我获取值的尝试，但它不起作用 -

var ddOptions = document.getElementById("divID");
var ddValue = ddOptions.options[ddOptions.selectedIndex].value;
    if (ddValue == "cat" || ddValue == "dog" || ddValue == "bird" || ddValue == "guinea pig" || ddValue == "rabbit")
    ddValue = "none";

【问题讨论】：

我应该提一下，这段代码被另一个 if 广播选择语句包裹。如果选择了收音机 1 并选择了上述任何下拉列表选项，则当您切换到收音机 2 时，上述选项应恢复为“无”，反之亦然。如果是这种情况，代码会是什么样子？

标签： jquery select dropdown option selectedindex

【解决方案1】：

将onchange 事件侦听器绑定到您的列表：

    var revertOptions = ['option1', 'option 2', 'option n' ...];

    document.getElementById("#mySelectListId").addEventListener("change", function(e){

      //here you handle the selected element's value
      var selectedValue = e.target[e.target.selectedIndex].value;
      if(revertOptions.indexOf(selectedValue) != -1)
      e.target.selectedIndex = "none";        

    });

【讨论】：

【解决方案2】：

我可能会写一个switch 声明，而不是像那样把所有东西都放在一行上。这样它的可读性就更高了，您可以使用我在此处开始的约定来保持它与您需要的其他选项的级联。

或者，您可以通过创建一个值数组以在之后重置并每次检查它来使其更漂亮，但无论如何它都可以工作！

$(".js-select").change(function() {
  let selectedOptionText = $(this).val();
  
  console.log(selectedOptionText + " was selected.");
  
  switch (selectedOptionText) {
    case "cat":
    case "dog":
    case "bird": {
      $(this).val("none");
      break;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="js-select">
  <option value="none" selected>None</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
  <option value="other">Don't reset if selected</option>
</select>

【讨论】：

我可以在不破坏脚本的情况下删除 console.log，对吗？我不需要浏览器通知我我已做出选择。
哦，当然可以！这只是为了说明的目的，因为我们不会因为下拉菜单立即自行重置而得到任何视觉反馈。

【解决方案3】：

这样你可以从下拉列表中获取值

$('#divID').val();

这样你就可以恢复默认了

$('#divID').val('');

所以你可以这样做：

//Gets the value from dropdown
var ddValue = $('#divID').val();
if (ddValue.equals(0) || ... || ddValue.equals(10))
{
    //Do something

    //Set the dropdown selected value to none
    $('#divID').val('');
}

如果你的 IF 选项太多，使用 SWITCH 语句会更易读

【讨论】：

在select 上调用.val() 是否返回当前选择的选项？
是的。它返回选定的值，但不返回选定的文本 - stackoverflow.com/questions/8978328/…
哈哈，糟糕，我不记得这么简单，我刚查了一下！