JavaScript - Dropdown value dependent

Question

I have two dropdown right now. I want to when the user selects "NO" the other automatically selects "YES" and vice versa.

I'm assuming I use JS here to make this occur, but not sure where to start. Below is my dropdown html code. If someone could help me get started, it would be helpful.

Code:

	<div class="cmicrophone" id="cmicrophone">Currently:
				<select id="cmicrophone" name="cmicrophone">
					<option value=" " selected = "selected"> </option>
					<option value="on">ON</option>
					<option value="off">OFF</option>
				</select>
			</div>				
			<div class="microphone" id="microphone">Microphone:
				<select id="microphone" name = "microphone">
					<option value=" " selected="selected"> </option>
					<option value="on" >ON</option>
					<option value="off">OFF</option>
				</select>
			</div

Add a change event handler to your <select> items. Then you can use an if-else to change the value of each of them and set them accordingly with .value. — Spencer Wieczorek
– Spencer Wieczorek, Commented Mar 28, 2017 at 20:09

kind user · Accepted Answer · 2017-03-28 20:14:00Z

1

You can assign a same class to each select element and bind change event listener.

$('.elem').on('change', function() {
  if ($(this).val() == 'on') {
    $('.elem').not(this).val('off');
  } else {
    $('.elem').not(this).val('on');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cmicrophone" id="cmicrophone">Currently:
  <select id="cmicrophone" class='elem' name="cmicrophone">
    <option value="" selected = "selected"></option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>

<div class="microphone" id="microphone">Microphone:
  <select id="microphone" class='elem' name="microphone">
    <option value="" selected = "selected"></option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>

answered Mar 28, 2017 at 20:14

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

kind user Over a year ago

@catung555555 Import jQuery before your script and make sure you are importing all scripts at the bottom of the body tag.

Carlo · Accepted Answer · 2017-03-28 20:09:45Z

0

A good starting point might be listening for changes on one select, and when the change happens, selecting the other <select> and setting the right value

answered Mar 28, 2017 at 20:09

Carlo

2,11221 silver badges30 bronze badges

Comments

Rico Kahler · Accepted Answer · 2017-03-28 20:24:57Z

0

Here's a vanilla JS solution (no jquery required).

The idea here is to:

select both <select> elements and save them into variables to refer to later using document.querySelector
add input event listeners on both elements that call a function to handle the event
then use inside the function selectElement.selectedIndex to check the selected index of one element and use that to set the value of the other.

// select the `<select>` elements
const cmicrophone = document.querySelector('#cmicrophone');
const microphone = document.querySelector('#microphone');

// define function to handler the events
function inputHandler(thisSelect, otherSelect) {
  if (thisSelect.selectedIndex == 1) {
    otherSelect.selectedIndex = 2;
  } else if (thisSelect.selectedIndex == 2) {
    otherSelect.selectedIndex = 1;
  } else {
    thisSelect.selectedIndex = 0;
    otherSelect.selectedIndex = 0;
  }
}

// add event listeners that will 'fire' when the input of the <select> changes
cmicrophone.addEventListener('input', event => {
  inputHandler(cmicrophone, microphone);
});

microphone.addEventListener('input', event => {
  inputHandler(microphone, cmicrophone);
});

<div>Currently:
  <select id="cmicrophone" name="cmicrophone">
    <option value=" " selected = "selected"> </option>
    <option value="on">ON</option>
    <option value="off">OFF</option>
  </select>
</div>
<div>Microphone:
  <select id="microphone" name="microphone">
    <option value=" " selected="selected"> </option>
    <option value="on" >ON</option>
    <option value="off">OFF</option>
  </select>
</div>

One more thing to add: You assigned the same value to multiple ids. You should only assign one unique id per element.

edited Mar 28, 2017 at 20:24

answered Mar 28, 2017 at 20:18

Rico Kahler

19.6k14 gold badges67 silver badges86 bronze badges

5 Comments

catung555555 Over a year ago

this is a stupid question, but when I used that in my code it didn't work. could you show me in a regular html formatted page

Rico Kahler Over a year ago

@catung555555 I'm not sure if I understand. This example is regular HTML. Maybe the issue is that I'm using ES2015 (newer javascript)? Try it again but don't use internet explorer. also check that there aren't any duplicate IDs

catung555555 Over a year ago

I'm using chrome right now, and there's no duplicate ids

Rico Kahler Over a year ago

@catung555555 is the script after the html? i.e. in the body after the HTML?

Rico Kahler Over a year ago

@catung555555 post a jsfiddle and i'll try to help

Collectives™ on Stack Overflow

JavaScript - Dropdown value dependent

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related