CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-select
catung555555
catung555555

Reputation: 53

JS script - Value Dependent (multiple dropdown)

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>

Upvotes: 0

Views: 70

Answers (2)

akinmail
akinmail

Reputation: 668

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>

Upvotes: 1

Rob Brander
Rob Brander

Reputation: 3781

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];

  ....
}

Upvotes: 0

Related Questions