简体   繁体   English

Javascript选择的索引onchange根本不起作用

[英]Javascript selected index onchange doesn't work at all

I am trying to create a select tag that holds values in it and if two out of the five values are selected another select box will show on the screen. 我正在尝试创建一个其中包含值的选择标记,如果从五个值中选择两个,则另一个选择框将显示在屏幕上。 I have tried searching for this and found where people are using javascript and using the onchange event but for some reason I cannot get it to work. 我尝试搜索此内容,发现人们在哪里使用javascript并使用onchange事件,但由于某种原因我无法使其正常工作。 The toggle id is the one I want to show up if individual or short term is selected if not I want it to be hidden. 如果未选择个人或短期,则切换ID是我想要显示的ID,否则我希望将其隐藏。 The code is below and thanks for your help in advance. 代码在下面,感谢您的提前帮助。 I didn't include the javascript because I deleted it all but I have tried it a few different ways with no luck. 我没有包含javascript,因为我将其全部删除,但是我尝试了几种不同的方法,但没有运气。 I am thinking it is the way I have the form laid out. 我认为这是我安排表格的方式。

HTML HTML

<tr>                        
   <td class='txt'><span>&#42;</span>Coverage Needed?</td>  
<td>
   <select name="ins_type" id='ins_options' onChange="toggle();">
     <option>Select...</option>                             
     <option value="Group">Group Insurance</option>
     <option value="Individual">Individual Insurance</option>
     <option value="Short Term">Short Term Insurance</option>                                   
     <option value="Medicare">Medicare</option>
     <option value="Life">Life Insurance</option>   
   </select>                
</td>                                   
<td ><div id='toggle'><span>&#42;</span>How Many?
   <select name='applicants' id='applicants' >                                      
      <option>Select...</option>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
      <option value='6'>6</option>
      <option value='7'>7</option>
      <option value='1'>8</option>
      <option value='9'>9</option>
      <option value='10'>10</option>    
   </select>
  </div>
  </td>             
</tr>

Javascript (I was thinking something like this should work) Javascript(我当时想这样的东西应该可以)

<script type="text/javascript">
  function toggle() {
    if (document.getElementById("ins_options").options
    [getElementById("ins_options").selectedIndex].value == "Individual") {
       document.getElementById("toggle").style.display = "none";
    } else {
       document.getElementById("toggle").style.display = "block";
    }
  }
</script> 

You're missing document in your selected index lookup - http://jsfiddle.net/VfEyW/ 您在所选索引查找中缺少document -http: //jsfiddle.net/VfEyW/

So instead of 所以代替

[getElementById("ins_options").selectedIndex]

try 尝试

[document.getElementById("ins_options").selectedIndex]

... ...

UPDATE UPDATE

To check against 2 values you can do this 要检查2个值,您可以执行此操作

  function toggle() {
    var val = document.getElementById("ins_options").options[document.getElementById("ins_options").selectedIndex].value;

    if ( val == "Individual" || val == "Short Term" ) {
       document.getElementById("toggle").style.display = "none";
    } else {
       document.getElementById("toggle").style.display = "block";
    }
  }

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM