1

3 つのテキスト フィールドがあり、オプション 1 が選択されている場合は最初のフィールドを表示し、2 番目と 3 番目のフィールドは非表示にします。オプション 2 が選択されている場合はその反対です。

私は次のことをしました：

<script language="javascript">

        function hola(x) {

            if(x == 1) {
                document.getElementById("div1").style.visibility="visible";
                document.getElementById("div2").style.visibility="hidden"; 
            }

            if(x == 2)  {
                document.getElementById("div1").style.visibility="hidden";
                document.getElementById("div2").style.visibility="visible"; 
            }
        }
    </script>

<body onload='hola(1)'>

<label  class="field6" for="shower_times">how many showers each takes per day: </label>
<SELECT name="shower_times" onChange="hola(this.value)">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
</SELECT>

<div id="div1">
<BR>
<label  class="field6" for="hour"> hour of the shower: </label><input type="text"   name="hour" class="input"> 
</div>

<div id="div2">
<label  class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> 
<BR>
<label  class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> 
</div>

オプションを変更すると機能しますが、最初は最初のフィールドのみを表示したいという問題があるため、使用しました

<body onload='hola(1)'>

最初は3つすべてが表示されています。

コードは単独で動作するように見えますが、このhttp://jsfiddle.net/3YZBm/1/として他のコードに追加すると、この部分は私が言及したように動作しません

4

1 に答える 1

1

純粋なJSを使用することを選択した場合、次のようなことができます...

HTML (少し変更)...

<label  class="field6" for="shower_times">how many showers each takes per day: </label>
<SELECT name="shower_times"  id="mselect" onChange="hola();">
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
</SELECT>
<div id="div1">
<BR>
<label  class="field6" for="hour"> hour of the shower: </label><input type="text"   name="hour" class="input"> 
</div>

<div id="div2">
<label  class="field6" for="hour1">hour of first shower: </label><input type="text" name="hour1" class="input"> 
<BR>
<label  class="field6" for="hour2">hour of second shower: </label><input type="text" name="hour2" class="input"> 
</div>
</div>

CSS (デフォルトで 1 が選択されているため、デフォルトで 2 つのフィールドを非表示にするオプション)...

#div2 {
 display:none;
}

そして、マギーが修正したJS...

  function hola() {
    var mselect  =  document.getElementById("mselect");
    var mselectvalue = mselect.options[mselect.selectedIndex].value;
    var mdivone =  document.getElementById("div1");
    var mdivtwo =  document.getElementById("div2");

      if (mselectvalue == 2) {
       mdivtwo.style.display = "block";
       mdivone.style.display = "none";

      }
      else {
      mdivtwo.style.display = "none";
      mdivone.style.display = "block";
      }  
}

そしてそれをバックアップするためのマギーの修正されたソリューション!

于 2013-07-11T15:41:32.953 に答える