JavaScript onclick事件是否無效 <select><option>的？

Question

由於某種原因，它下面的代碼無法正常工作。 除非我對我的JavaScript非常愚蠢，否則除了在<option>上觸發的onclick事件之外，我看不出會出現什么問題。

 function showOther() { document.getElementById('other').value = ""; document.getElementById('other').style.display = 'block'; document.getElementById('otherBR').style.display = 'block'; } function hideOther() { document.getElementById('other').style.display = 'none'; document.getElementById('otherBR').style.display = 'none'; } 

 #other { display: none; } #otherBr { display: none; } 

 <select name="" id="drop_down"> <option value="choose" onclick="hideOther();">Please choose</option> <option value="Allure" onclick="hideOther();">Allure</option> <option value="Elle" onclick="hideOther();">Elle</option> <option value="In-Style" onclick="hideOther();">In-Style</option> <option value="other" id="otherOption" onclick="showOther();">Other</option> </select> <input type="text" name="fields_where" id="other" placeholder="Other" /> <br id="otherBR" /> 

Answer 1

將此函數添加到您的JS：

function showHideOther(){
    if (document.getElementById('drop_down').value == 'other') {
         showOther();   
    } else {
         hideOther();   
    }
}

並改變你的選擇元素，如下所示：

<select name="" id="drop_down" onchange="showHideOther();">
        <option value="choose">Please choose</option>
        <option value="Allure">Allure</option>
        <option value="Elle">Elle</option>
        <option value="In-Style">In-Style</option>
        <option value="other">Other</option>
</select>

 function showHideOther() { if (document.getElementById('drop_down').value == 'other') { showOther(); } else { hideOther(); } } function showOther() { document.getElementById('other').value = ""; document.getElementById('other').style.display = 'block'; document.getElementById('otherBR').style.display = 'block'; } function hideOther() { document.getElementById('other').style.display = 'none'; document.getElementById('otherBR').style.display = 'none'; } 

 #other { display: none; } #otherBr { display: none; } 

 <select name="" id="drop_down" onchange="showHideOther();"> <option value="choose">Please choose</option> <option value="Allure">Allure</option> <option value="Elle">Elle</option> <option value="In-Style">In-Style</option> <option value="other">Other</option> </select> <input type="text" name="fields_where" id="other" placeholder="Other" /> <br id="otherBR" /> 

Answer 2

只回答JS，而不是jQuery：

選項標簽中的onclick事件剛剛被Firefox識別。 如果您需要適用於所有瀏覽器（如IE或Chrome）的解決方案，則可以在“ 選擇 ”元素上使用onchange事件。

HTML：

<select name="" id="drop_down" onchange="showHideOther(this.value);">
    <option value="choose" ">Please choose</option>
    <option value="Allure">Allure</option>
    <option value="Elle" >Elle</option>
    <option value="In-Style" >In-Style</option>
    <option value="other" id="otherOption">Other</option>
</select>

JS在html head部分中定義為腳本：

function showHideOther(value){
    alert(value);
    if (value==='other'){
        document.getElementById('other').value = "";
        document.getElementById('other').style.display = 'block'; 
        document.getElementById('otherBR').style.display = 'block';
    }
    else{
            document.getElementById('other').style.display = 'none'; 
            document.getElementById('otherBR').style.display = 'none';
    }
}

JSFiddle樣本工作正常： http ： //jsfiddle.net/amontellano/gLML3/14/

我希望它有所幫助。

Answer 3

DEMO

var dropdown = document.getElementById('drop_down');

dropdown.onchange = function() {
  var selected = dropdown.options[dropdown.selectedIndex].value;

  switch(selected) {
    case 'other':
      document.getElementById('other').value = "";
      document.getElementById('other').style.display = 'block'; 
      document.getElementById('otherBR').style.display = 'block';
      break;
    default:
      document.getElementById('other').style.display = 'none'; 
      document.getElementById('otherBR').style.display = 'none';
      break;
  }
}

Answer 4

只需將這些功能添加到您的代碼中：

$('#drop_down').on('change', function(){
    ($(this).val() == 'other') ? showOther() : hideOther();
});

在這里： http ： //jsfiddle.net/gLML3/7/