JS - 依赖于Dropdown元素

时间：2017-03-29 12:56:17

标签： javascript html

我正在尝试让用户选择“是”而另一个下拉菜单自动变为“否”，反之亦然。我在下面有一个代码，我不确定它为什么不起作用。

*我正试图让它上传，因此无需用户按下按钮即可自动运行。

代码：

<!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>

3 个答案:

答案 0 :(得分：2)

id是唯一的，请尝试使用class名称。您应该在两个select框中应用类名。并且

  
      
  1. s1是yes s2是on
    2.   
  2. s1是No s2是OFF
    3.   

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

更简化功能使用此

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

使用单页html更新了答案

  

他们的错误位置错误js script

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你应该从div中删除id并改变你的开始逻辑，如：

<!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>

答案 2 :(得分：0)

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代码 

$(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')
  }
});
相关问题
最新问题