javascript how to remove select option based on if else

Question

Hello I wrote code to remove 2 option values if d is equal to something

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

It removes it even if d is not equal to A600. How come?

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>

Now it doesnt remove it at all hmm

A snippet would help

Alexandre Elshobokshy
– Alexandre Elshobokshy

2020-07-01 07:53:08 +00:00
Commented Jul 1, 2020 at 7:53 — Alexandre Elshobokshy
– Alexandre Elshobokshy, Commented Jul 1, 2020 at 7:53
@IslamElshobokshy okay ill add it

Margarita Weiß
– Margarita Weiß

2020-07-01 07:57:13 +00:00
Commented Jul 1, 2020 at 7:57 — Margarita Weiß
– Margarita Weiß, Commented Jul 1, 2020 at 7:57

Alexandre Elshobokshy · Accepted Answer · 2020-07-01 08:50:22Z

2

You need to check for change in 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>

edited Jul 1, 2020 at 8:50

answered Jul 1, 2020 at 8:01

Alexandre Elshobokshy

11k6 gold badges35 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Margarita Weiß Over a year ago

if i change back to something else the values are gone aswell. could it be possible to readd them again?

Margarita Weiß Over a year ago

i just noticed if i change from non A600 value to another non a600 value the values will keep getting duplicated.

Alexandre Elshobokshy Over a year ago

@MargaritaWeiß oops, fixed :)

Oleh Vdovenko · Accepted Answer · 2020-07-01 08:03:09Z

1

Try to add curly brackets to if statement, like that

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

answered Jul 1, 2020 at 8:03

Oleh Vdovenko

4394 silver badges16 bronze badges

Comments

Shahnawaz Hossan · Accepted Answer · 2020-07-01 08:41:11Z

It's simple:

$('#random').change(function () {
    var val = $(this).val();
    if (val === 'A600') {
        $("#randomtype option[value='aosp'], #randomtype option[value='oneui']").remove();
    }
});

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

  <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>

</body>

Safyan Yaqoob · Accepted Answer · 2020-07-01 08:05:06Z

0

Use === operator to compare equal value in javascript.

if(d === "A600")
{
 //remove select option code here.
}

answered Jul 1, 2020 at 8:05

Safyan Yaqoob

5523 silver badges14 bronze badges

Collectives™ on Stack Overflow

javascript how to remove select option based on if else

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related