CODEWITHSUNDEEP
javascripthtml
catung555555
catung555555

Reputation: 53

JS - Dropdown element dependent

I'm trying to have the user pick "YES" and the other dropdown automatically goes to "NO" and vice versa. I have a code below, I'm not sure why it is not working.

*I'm trying to get it onload so it automatically runs without the user having to press a button.

Code:

<!DOCTYPE html>
<html>
    <body>
      <script>
        const cmicrophone = document.querySelector('.select1');
        const microphone = document.querySelector('.select2');

        function inputHandler(thisSelect, otherSelect) {
          // console.log(thisSelect.selectedIndex)
          if (thisSelect.selectedIndex == 1) {
            otherSelect.selectedIndex = 1;
          } else if (thisSelect.selectedIndex == 2) {
            otherSelect.selectedIndex = 2;
          } else {
            thisSelect.selectedIndex = 0;
            otherSelect.selectedIndex = 0;
          }
        }

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

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

      <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 ">YES</option>
          <option value="'S microphone is currently off. Please remind them to turn it ">NO</option>
        </select>
      </div>        
      <div class="microphone" id="microphone">Microphone:
        <select id="microphone" class="microphone select2" name = "microphone">
          <option value=" "  selected="selected"> </option>
          <option value="ON. Thank you.">ON</option>
          <option value="OFF. Thank you.">OFF</option>
        </select>
      </div>    

      <div class="button updatebutton">
        <button onclick="inputHandler(thisSelect, otherSelect)">UPDATE</button>
      </div>                
    </body>
</html>

Upvotes: 0

Views: 71

Answers (3)

prasanth
prasanth

Reputation: 22500

id is unique so try with class name .you should apply the class name in two select boxes.And

  1. s1 is yes s2 is on
  2. s1 is No s2 is OFF

<!DOCTYPE html>
<html>
<body onload="start()">
<script>
function start(){
const cmicrophone = document.querySelector('.select1');
		const microphone = document.querySelector('.select2');

		function inputHandler(thisSelect, otherSelect) {
    // console.log(thisSelect.selectedIndex)
		  if (thisSelect.selectedIndex == 1) {
			otherSelect.selectedIndex = 1;
		  } else if (thisSelect.selectedIndex == 2) {
			otherSelect.selectedIndex = 2;
		  } else {
			thisSelect.selectedIndex = 0;
			otherSelect.selectedIndex = 0;
		  }
		}

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

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

</script>
				<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 ">YES</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">NO</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected"> </option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	

<div class="button updatebutton">
				<button onclick="inputHandler(thisSelect, otherSelect)">UPDATE</button>
			</div>				
			</form>
		</div>
</body>
</html>

for more simplified of function use this

function inputHandler(thisSelect, otherSelect) {
otherSelect.selectedIndex = thisSelect.selectedIndex;
        }

updated answer with single page html

They error are placing wrong place of js script

<!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 ">YES</option>
						<option value="'S microphone is currently off. Please remind them to turn it ">NO</option>
					</select>
				</div>		
				<div class="microphone" id="microphone">Microphone:
					<select id="microphone" class="microphone select2" name = "microphone">
						<option value=" "  selected="selected"> </option>
						<option value="ON. Thank you.">ON</option>
						<option value="OFF. Thank you.">OFF</option>
					</select>
				</div>	

<div class="button updatebutton">
				<button onclick="inputHandler(thisSelect, otherSelect)">UPDATE</button>
			</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: 2

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

JsFiddle Example

<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 ">YES</option>
                        <option value="'S microphone is currently off. Please remind them to turn it ">NO</option>
                    </select>
                </div>      
                <div class="microphone" id="microphone">Microphone:
                    <select id="microphone" class="microphone select2" name = "microphone">
                        <option value=" "  selected="selected"> </option>
                        <option value="ON. Thank you.">ON</option>
                        <option value="OFF. Thank you.">OFF</option>
                    </select>
                </div>  

<div class="button updatebutton">
                <button onclick="inputHandler(thisSelect, otherSelect)">UPDATE</button>
            </div>              
            </form>
        </div>
</body>
</html>

JS Code

$(document).ready(function(){
    change1('YES')
    change2('OFF')
});

function change1(text1)
{
  $("#cmicrophone option").filter(function() {    
    //may want to use $.trim in here
      return $(this).text() == text1; 
  }).prop('selected', true);
}

function change2(text2)
{
    $("#microphone option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text2; 
    }).prop('selected', true);
}

$('#cmicrophone').on('change', function() {
  if ($(this).text() == 'YES') {
    change2('ON')
    //$('.elem').not(this).val('off');
  } else {
    //$('.elem').not(this).val('on');
    change2('OFF')
  }
});


$('#microphone').on('change', function() {
  if ($(this).text() == 'ON') {
    change1('NO')
    //$('.elem').not(this).val('off');
  } else {
    //$('.elem').not(this).val('on');
    change1('YES')
  }
});

Upvotes: 0

daletune
daletune

Reputation: 71

You should remove ids from divs and change a little bit your start logic like:

<!DOCTYPE html>
<html>
<body>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", ready);

        function ready() {
            const cmicrophone = document.querySelector('#cmicrophone');
            const microphone = document.querySelector('#microphone');

            function inputHandler(thisSelect, otherSelect) {
                console.log(thisSelect.options[thisSelect.selectedIndex].value);
              if (thisSelect.selectedIndex == 1) {
                otherSelect.selectedIndex = 2;
              } else if (thisSelect.selectedIndex == 2) {
                otherSelect.selectedIndex = 1;
              } else {
                thisSelect.selectedIndex = 0;
                otherSelect.selectedIndex = 0;
              }
            }

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

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

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

Upvotes: 0

Related Questions