1

値を保持する選択タグを作成しようとしています。5つの値のうち2つを選択すると、別の選択ボックスが画面に表示されます。私はこれを検索してみましたが、人々がjavascriptとonchangeイベントを使用している場所を見つけましたが、何らかの理由でそれを機能させることができません。トグルIDは、個別または短期を選択した場合に表示したいもので、非表示にしたい場合は表示しません。コードは以下のとおりです。事前にご協力いただきありがとうございます。javascriptをすべて削除したため、含めませんでしたが、運が悪かったため、いくつかの異なる方法で試しました。それが私が形を整える方法だと思っています。

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（私はこのようなものがうまくいくはずだと思っていました）

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

1 に答える 1

1

document選択したインデックス ルックアップに欠落しています - http://jsfiddle.net/VfEyW/

だから代わりに

[getElementById("ins_options").selectedIndex]

試す

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

...

アップデート

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";
    }
  }
于 2012-08-08T17:59:26.427 に答える