JS - 依賴 - 優文庫

下拉元素我試圖讓用戶挑「YES」，而另一個下拉列表會自動進入「NO」，反之亦然。我有一個代碼在下面，我不知道爲什麼它不工作。JS - 依賴

*我試圖得到它的onload，因此無需按一個按鈕，用戶會自動運行。

代碼：

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

來源

2017-03-29 catung555555

id是唯一與class的名稱，以便嘗試。你必須在兩天select boxes.And

s1 is yes s2 is on

s1 is No s2 is OFF

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

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

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

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

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

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

應用類名

更多的簡化功能利用這一

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

單頁HTML更新答案

They error are placing wrong place of js script

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 

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

 
<div class="button updatebutton"> 
 
\t \t \t \t <button onclick="inputHandler(thisSelect, otherSelect)">UPDATE</button> 
 
\t \t \t </div> \t \t \t \t 
 
\t \t \t </form> 
 
\t \t </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 => { 
 
\t \t inputHandler(cmicrophone, microphone); 
 
\t \t }); 
 

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

來源

2017-03-29 13:19:29 prasanth

我需要調用什麼？ jQuery的？它不適用於我仍然不知道我在做什麼這是錯的。 – catung555555

不需要'jquery'。複製我的代碼並粘貼你的html ..它的工作..哪裏有錯誤發生你能告訴嗎？ – prasanth

我更新了我的代碼和我從你的代碼複製的代碼。當我嘗試運行代碼段的錯誤是：「消息」：「遺漏的類型錯誤：無法讀取屬性空的‘的addEventListener’」，「文件名」：「http://stacksnippets.net/js」，「LINENO 「：30， ‘colno’：14 } – catung555555

你應該從申報單中刪除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>

來源

2017-03-29 13:19:49 daletune

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') 
    } 
});

來源

2017-03-29 13:28:29

只需將函數名稱更改爲小寫，以遵循js約定。 – FrankCamara

好的我做了@FrankCamara –

JS - 依賴

回答

相關問題