时间戳

首页 > 解决方案 > javascript如何根据if else删除选择选项

javascript - javascript如何根据if else删除选择选项

问题描述

您好，如果 d 等于某个值，我编写了删除 2 个选项值的代码

var d = document.getElementById("random").value
if(d == "A600")
    $("#randomtype option[value='aosp'],#randomtype option[value='oneui']").remove();

即使d不等于 ，它也会将其删除A600。怎么来的？

var d = document.getElementById("random").value
if (d == "A600")
  $("#randomtype option[value='aosp'],#randomtype option[value='oneui']").remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<select id="random" name="random">
  <option value="negative">Model</option>
  <option value="J710">J710X</option>
  <option value="J701">J701X</option>
  <option value="A320">A320X</option>
  <option value="G610">G610X</option>
  <option value="J600">J600X</option>
  <option value="A600">A600X</option>
  <option value="J737">J737X</option>
  <option value="M105">M105X</option>
</select>

<select id="randomtype" name="randomtype">
  <option value="negative">Variant</option>
  <option value="oneui">OneUI Non Treble</option>
  <option value="oneuit">OneUI Treble</option>
  <option value="aosp">AOSP Non treble</option>
  <option value="aospt">AOSP Treble</option>
</select>

现在它根本没有删除它嗯

标签： javascriptjquery

解决方案

您需要检查 select 的变化：

$('#random').on('change', function() {
  var d = document.getElementById("random").value
  var optionExists = ($("#randomtype option[value='oneui']").length > 0);

  if (this.value == "A600") {
    $("#randomtype option[value='oneui']").remove();
    $("#randomtype option[value='aosp']").remove();
  } else if (!optionExists) {
    $('#randomtype').append("<option value='oneui'>OneUI Non Treble</option>");
    $('#randomtype').append("<option value='aosp'>AOSP Non treble</option>");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<select id="random" name="random">
  <option value="negative">Model</option>
  <option value="J710">J710X</option>
  <option value="J701">J701X</option>
  <option value="A320">A320X</option>
  <option value="G610">G610X</option>
  <option value="J600">J600X</option>
  <option value="A600">A600X</option>
  <option value="J737">J737X</option>
  <option value="M105">M105X</option>
</select>

<select id="randomtype" name="randomtype">
  <option value="negative">Variant</option>
  <option value="oneui">OneUI Non Treble</option>
  <option value="oneuit">OneUI Treble</option>
  <option value="aosp">AOSP Non treble</option>
  <option value="aospt">AOSP Treble</option>
</select>

推荐阅读