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

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>

if i change back to something else the values are gone aswell. could it be possible to readd them again?
i just noticed if i change from non A600 value to another non a600 value the values will keep getting duplicated.

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

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(); }

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

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

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

Collectives™ on Stack Overflow

javascript how to remove select option based on if else

4 Answers 4

3 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Related