Question

在javascript中，如果在下拉菜单中选择了一个选项，那么在该下拉菜单中如何获得一个在当前选项上自动选择了上一个选项的下拉选项（如果该当前选项在某些情况下失败）。

Answer 1

您已经发现，直接从下拉菜单本身更改下拉菜单时，无法获得先前选择的值。

最好的选择是存储当前选择的值，我的偏好是通过data-属性。

因此，例如，如果您有如下选择...

<select>
  <option value="1" selected>One</option>
  <option value="2">Two</option>
</select>

您应将当前选择的值作为data-previousvalue属性添加...这将是首先创建控件的代码的一部分...

<select data-previousvalue="1">
  <option value="1" selected>One</option>
  <option value="2">Two</option>
</select>

然后，当更改选择时，您可以检查当前值，并在必要时将其重置为存储的值。

在下面的示例中，如果您选择第三项Three (bad)，它将自动将您带回到先前选择的选项...

window.addEventListener("load", function() {
  // Get the dropdown
  var dd = document.getElementsByTagName("select")[0];
  // When the dropdown changes
  dd.addEventListener("change", function(){
    // If it's a bad one
    if (dd.value == "3") {
      // Reselect the previous value
      dd.value = dd.getAttribute("data-previousvalue");
    }
    // Now store the value for the next time
    dd.setAttribute("data-previousvalue", dd.value);
  });
});

<select data-previousvalue="4">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three (bad)</option>
  <option value="4" selected>Four</option>
</select>

如果您有jquery可用...

$(function(){
  $("select").on("change", function(){
    var $dd = $(this);
    // If it's a bad one
    if ($dd.val() == "3") {
      // Reselect the previous value
      $dd.val($dd.data("previousvalue"));
    }
    // Now store the value for the next time
    $dd.data("previousvalue", $dd.val());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select data-previousvalue="4">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three (bad)</option>
  <option value="4" selected>Four</option>
</select>

如果无法在渲染时将data属性添加到控件，则还可以在页面加载时进行设置...

window.addEventListener("load", function() {
  // Get the dropdown
  var dd = document.getElementsByTagName("select")[0];
  // Set the currently selected value into the attribute
  dd.setAttribute("data-previousvalue", dd.value);
  // When the dropdown changes
  dd.addEventListener("change", function(){
    // If it's a bad one
    if (dd.value == "3") {
      // Reselect the previous value
      dd.value = dd.getAttribute("data-previousvalue");
    }
    // Now store the value for the next time
    dd.setAttribute("data-previousvalue", dd.value);
  });
});

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three (bad)</option>
  <option value="4" selected>Four</option>
</select>

如果您有jquery可用...

$(function(){
  $("select")
    .each(function(i,v) {
      var $dd = $(this);
      $dd.data("previousvalue", $dd.val());
    })
    .on("change", function(){
      var $dd = $(this);
      // If it's a bad one
      if ($dd.val() == "3") {
        // Reselect the previous value
        $dd.val($dd.data("previousvalue"));
      }
      // Now store the value for the next time
      $dd.data("previousvalue", $dd.val());
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three (bad)</option>
  <option value="4" selected>Four</option>
</select>

Answer 2

您可以设置element.val(previousStatus)

// Your changing value should assign on adStatus
// May be its come from database(previous status) or depends on user activity
let adStatus = 'Unfriendly';
$('#AdblockType').val(`${adStatus}`);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select id="AdblockType">
  <option value="Friendly">Friendly</option>
  <option vlaue="Unfriendly">Unfriendly</option>
</select>

如何在javascript的下拉菜单中自动获取先前选择的选项

2 个答案: