JavaScript onclick事件不能在< select> <选项>的？

问题描述

由于某种原因，下面的代码无法正常工作。除非我对JavaScript非常愚蠢，否则除了onclick事件未触发< option> s之外，我无法看到发生了什么问题。

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 =选择onclick =hideOther（）;>请选择< / option> < option value =Allureonclick =hideOther（）;> Allure< / option> < option value =Elleonclick =hideOther（）;> Elle< / option> < option value =In-Styleonclick =hideOther（）;> In-Style< / option> < option value =otherid =otherOptiononclick =showOther（）;>其他< / option>< / select>< input type =textname =fields_whereid =other placeholder =Other/>< br id =otherBR/>  

解决方案

将此函数添加到JS中：

  function showHideOther （）{
 if（document.getElementById（'drop_down'）。value =='other'）{
 showOther（）; 
} else {
 hideOther（）; 
 
 
  

然后像这样改变你的select元素：

 < select name =id =drop_downonchange =showHideOther（）;> 
< option value =choose>请选择< / option> 
< option value =Allure> Allure< / option> 
< option value =Elle> Elle< / option> 
< option value =In-Style> In-Style< / option> 
< option value =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_downonchange =showHideOther（）;> < option value =choose>请选择< / option> < option value =Allure> Allure< / option> < option value =Elle> Elle< / option> < option value =In-Style> In-Style< / option> < option value =other>其他< / option>< / select>< input type =textname =fields_whereid =otherplaceholder =Other/>< br id =otherBR/>  

For some reason the code below it is not working correctly. Unless I'm being quite stupid with my JavaScript I can't see what's going wrong besides the onclick events not firing on the <option>s.

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" />

解决方案

Add this function to your JS:

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

And change your select element like this:

<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" />

这篇关于JavaScript onclick事件不能在< select> <选项>的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！