JS script - Value Dependent (multiple dropdown)

Question

Right now I have two dropdowns and the goal is to have the User select "OFF" on the first option, the second dropdown automatically selects "ON" and vice versa.

The code currently below with the JavaScript works, but works for only one pair of the dropdown. I was wondering what I need to change to make it work for both pairs or even four pairs in the future.

Code:

<!DOCTYPE html>
<html>
<body>
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
				

				<br>
				
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
			</form>
		</div>
    <script>
const cmicrophone = document.querySelectorAll('.select1')[0];
const microphone = document.querySelectorAll('.select2')[0];
function inputHandler(thisSelect, otherSelect) {
 otherSelect.selectedIndex =thisSelect.selectedIndex
        }
        cmicrophone.addEventListener('change', event => {
		  inputHandler(cmicrophone, microphone);
		});

		microphone.addEventListener('change', event => {
		  inputHandler(microphone, cmicrophone);
		});
</script>
</body>
</html>

akinmail · Accepted Answer · 2017-03-29 18:17:40Z

1

Here is your solution

<!DOCTYPE html>
<html>
<body>
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
				

				<br>
				
				<div class="cmicrophone" id="cmicrophone">Currently:
					<select id="cmicrophone" class="cmicrophone select1" name="cmicrophone" onchange="">
						<option value="">Select Option</option>
						<option value="'S microphone is currently on. Please remind them to turn it ">OFF</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">ON</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected">Select Option</option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	
			</form>
		</div>
    <script>
var cmicrophone = document.querySelectorAll('.select1');
var microphone = document.querySelectorAll('.select2');
 
function inputHandlerCmicrophone(thisSelect, otherSelect, j) {
    
    var test = document.querySelectorAll('.select1');
    for(i=0; i<test.length; i++){
        if(test[i] == j){
            otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
            break;
}
}

 
        }
   function inputHandlerMicrophone(thisSelect, otherSelect, j) {

    var test = document.querySelectorAll('.select2');
    for(i=0; i<test.length; i++){
        if(test[i] == j){
            otherSelect[i].selectedIndex =thisSelect[i].selectedIndex
            break;
}

 
        }}
        for(i=0; i<cmicrophone.length; i++) {
            cmicrophone[i].addEventListener('change', function (e) {
		  inputHandlerCmicrophone(cmicrophone, microphone, e.target);
		});
}
        
        for(k=0; k<microphone.length; k++) {
            microphone[k].addEventListener('change', function (e) {
		  inputHandlerMicrophone(microphone, cmicrophone, e.target);
		});
}
		
</script>
</body>
</html>

edited Mar 29, 2017 at 18:17

answered Mar 29, 2017 at 17:20

akinmail

6786 silver badges14 bronze badges

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

4 Comments

catung555555 Over a year ago

I don't want all of them to be linked together though.

akinmail Over a year ago

Please explain what you want clearly. So i can help you. Cheers

catung555555 Over a year ago

Yes thank you very much. Right now your code affects both pairs of dropdown. I need them to be independent because I'll have 4 pairs of dropdown eventually. I can't have all of them link together. They all should have the same functionality, if one pick YES then the other is NO and vice versa, but it can't be linked like it is right now sir

catung555555 Over a year ago

I will. Thank you very much.

Rob Brander · Accepted Answer · 2017-03-29 16:18:51Z

0

I would suggest using document.getElementById() instead of querySelectorAll(). The problem is that you're always accessing the first one, element 0. You also need to ensure you have unique values for each 'id' property; in the code above you have duplicate values for microphone and cmicrophone.

You will need to add a loop for dynamic number of selects by fetching all of them and iterating over them to map each of the event handlers:

const cmicrophones = document.querySelectorAll('.select1');
const microphones = document.querySelectorAll('.select2');
for (var i = 0; i < cmicrophones.length; i++) {
  const cmicrophone = cmicrophones[i];
  const microphone = microphones[i];

  ....
}

answered Mar 29, 2017 at 16:18

Rob Brander

3,7811 gold badge22 silver badges33 bronze badges

4 Comments

Rob Brander Over a year ago

I did provide an example in my answer; what part do you not understand?

catung555555 Over a year ago

so if the id is different say "microphone1" and "cmicrophone1" I would just continue in the for loop.... "const cmicrophone1 = cmicrophone1[i];.....??

Rob Brander Over a year ago

In the example I provided, I'm not using IDs. I was suggesting the use of IDs because it is much faster to look up by ID than by querySelector

catung555555 Over a year ago

So if I'm wrong please let me know. You're calling select all on the select1 and 2 which will be the variable. The for loop is then? I don't get .

Collectives™ on Stack Overflow

JS script - Value Dependent (multiple dropdown)

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related