本文介绍了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事件不能在&lt; select&gt; &LT;选项&GT;的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-11 20:42