javascript 如何删除基于 if else 的选择选项

Question

您好，我编写了代码，如果 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>

现在它根本没有删除它，嗯

Answer 1

您需要检查 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>