Javascript: Remove different option-tags from a dropdown list depending on another dropdown?

Question

Yeah, the title is a mess.

Here's what i'm trying to do: I have one main dropdown list where i can choose between, let's say, two options. Option1, and Option2. If Option1 is selected, i don't want anything to happen. If Option2 is selected, i want to remove one option-tag from another dropdown list.

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

Thanks!

Answer 1

I think you'll get better responses and more attention if your questions include code demonstrating your own attempts to find an answer, rather than asking others to write the code that you need. Not just because people don't want to feel like their doing free work, but it also becomes much more difficult to answer.

For example, even though what you're trying to do is pretty basic javascript, there are dozens of different ways you could solve it. Here's a quick working answer for your question (using jQuery):

<script>
  $(document).ready(function(){
    $('select[name=main_dropdown]').bind('change',function(){
      if($(this).val() == 'Option2') $('select[name=secondary_dropdown] option[value=Option2]').remove();
    });   
  });
</script>

<select name="main_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option>
</select>

<select name="secondary_dropdown">
    <option value="Option1">Option 1</option>
    <option value="Option2">Option 2</option> // Let's say i want to remove this option tag if Option2 in main_dropdown is selected.
    <option value="Option2">Option 2</option>
</select>

See it in action.

That said, this solution is incredibly brittle. It'll do what you want in this case , but isn't a very good solution if your relationships change, or code gets more complex, etc. Without example code, it's impossible to tell what criteria you're using to target the options and remove them, so it's impossible to do you much good.

I recommend starting with the jQuery library, which has some great Tutorials . You should be able to solve problems like this on your own pretty quickly if you give it a shot. If your code ends up not working and you don't know where to turn, fear not -- I'm sure people here will be happy to help you out.

Answer 2

<option value="Option2" id="ToBeOrNotToBe">Option 2</option>

If the value of 'main_dropdown' is "Option2" (do a comparison), remove document.getElementById("ToBeOrNotToBe") from "secondary_dropdown" using .removeChild() . I would suggest giving all your selects a unique id as well as name so you can use document.getElementById() to get your element, then manipulate everything using .removeChild(). The parameter you would pass to removeChild() would be your option2.

However, removeChild() returns the object it deletes, so store it into another variable, so if the user changes his mind with the main drop down, appendChild() the removed option2 back as a child to "secondary_dropdown" .

Also, in my opinion, first construct the main dropdown, and once they have selected a value, then construct the second dropdown using appendChild() into the document itself. If you look, http://www.w3schools.com/tags/tag_option.asp shows the event listeners you can attach to options, so once an option is selected, insert the second dropdown below the first one, and construct it accordingly.

If you just want a fast and simple solution, use an event listener to activate when an option in the main dropdown is selected, then remove the option2 or append it, accordingly.