Revert to original dropdown value if another option is selected

Question

I need a dropdown list of let's say 10 options to revert to the value="none" starting option if specific other options are selected. How can I grab the value of the dropdown list using selectedIndex?

The below code works, but I would like to grab the values of the selectedIndex -

var ddOptions = document.getElementById("divID").options;
    if (ddOptions.selectedIndex == 2 || ddOptions.selectedIndex == 3 || ddOptions.selectedIndex == 4 || ddOptions.selectedIndex == 7 || ddOptions.selectedIndex == 8)
    ddOptions.selectedIndex = 0;

This is my attempt to grab the values but it is not working -

var ddOptions = document.getElementById("divID");
var ddValue = ddOptions.options[ddOptions.selectedIndex].value;
    if (ddValue == "cat" || ddValue == "dog" || ddValue == "bird" || ddValue == "guinea pig" || ddValue == "rabbit")
    ddValue = "none";

I should mention this code is wrapped by another if statement of a radio selection. If radio 1 is selected and any of the aforementioned dropdown list options are selected, when you switch to radio 2, the aforementioned options should revert back to "none" and vice versa. how would the code look if that is the case? — apexturtle, Jan 15 '18 at 19:13

score 0 · Answer 1 · answered Jan 15 '18 at 18:17

Bind an onchange event listener to your list:

    var revertOptions = ['option1', 'option 2', 'option n' ...];

    document.getElementById("#mySelectListId").addEventListener("change", function(e){

      //here you handle the selected element's value
      var selectedValue = e.target[e.target.selectedIndex].value;
      if(revertOptions.indexOf(selectedValue) != -1)
      e.target.selectedIndex = "none";        

    });

King Clauber · Answer 2 · 2018-01-15T18:33:03.887

0

With this you can get the value from the dropdown

$('#divID').val();

With this you can set it back to default

$('#divID').val('');

So you can do something like this:

//Gets the value from dropdown
var ddValue = $('#divID').val();
if (ddValue.equals(0) || ... || ddValue.equals(10))
{
    //Do something

    //Set the dropdown selected value to none
    $('#divID').val('');
}

If you have too many options on your IF, it would be more readable to use a SWITCH statement

edited Jan 15 '18 at 18:33

answered Jan 15 '18 at 18:18

King Clauber

39
10

Does calling `.val()` on a `select` return the currently selected option? – Jonathan Bowman Jan 15 '18 at 18:26
Yes. It returns the selected value, but not the selected text - https://stackoverflow.com/questions/8978328/get-the-value-of-a-dropdown-in-jquery – King Clauber Jan 15 '18 at 18:29
Haha, my bad I didn't remember it being that easy and I just checked it! – Jonathan Bowman Jan 15 '18 at 18:29

Jonathan Bowman · Answer 3 · 2018-01-15T18:29:33.613

I'd probably make a switch statement, instead of keeping things all on one line like that. That way it's a little more readable, and you can use the convention I started here to keep it cascading down with the other options you need.

Or, you could make it a little prettier by creating an array of values to reset afterwards and checking it each time, but it'll work either way!

$(".js-select").change(function() {
  let selectedOptionText = $(this).val();
  
  console.log(selectedOptionText + " was selected.");
  
  switch (selectedOptionText) {
    case "cat":
    case "dog":
    case "bird": {
      $(this).val("none");
      break;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="js-select">
  <option value="none" selected>None</option>
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="bird">Bird</option>
  <option value="other">Don't reset if selected</option>
</select>

I can remove the console.log without breaking the script, correct? I don't need the browser to notify me I have made a selection. — apexturtle, Jan 15 '18 at 18:40
Oh, for sure you can! That was just in there for illustrative purposes, since we wouldn’t get any visual feedback on account of the dropdown resetting itself instantly. — Jonathan Bowman, Jan 15 '18 at 22:49

Revert to original dropdown value if another option is selected

3 Answers3