-2

これは chrome と IE では機能しません。私は Javascripting が苦手なので、何を探すべきかわかりません。では、これを機能させるにはどうすればよいでしょうか。ここで解決策を見つけようと検索しましたが、運がありません。

Javascript コード:

function show(id) {
    var element = document.getElementById(id);
    element.style.display = "";
}

function hide(id) {
    var element = document.getElementById(id);
    element.style.display  = "none";
}

function hideAll() {
    hide('child1');
    hide('child2');
    hide('child3');
    hide('child4');
    hide('child5');
}

HTMLコード

    <select name="parent" id="parent">
<option value="0" selected>Please choose</option>
<option value="1" onclick="hideAll(); show('child1');">Parent 1</option>
<option value="2" onclick="hideAll(); show('child2');">Parent 2</option>
<option value="3" onclick="hideAll(); show('child3');">Parent 3</option>
<option value="4" onclick="hideAll(); show('child4');">Parent 4</option>
<option value="5" onclick="hideAll(); show('child5');">Parent 5</option>
</select>
</p>
<select name="child1" id="child1" style="display:none">
<option value="1">Child1 - 1</option>
<option value="2">Child1 - 2</option>
<option value="3">Child1 - 3</option>
<option value="4">Child1 - 4</option>
<option value="5">Child1 - 5</option>
</select>
<select name="child2" id="child2" style="display:none">
<option value="1">Child2 - 1</option>
<option value="2">Child2 - 2</option>
<option value="3">Child2 - 3</option>
<option value="4">Child2 - 4</option>
<option value="5">Child2 - 5</option>
</select>
<select name="child3" id="child3" style="display:none">
<option value="1">Child3 - 1</option>
<option value="2">Child3 - 2</option>
<option value="3">Child3 - 3</option>
<option value="4">Child3 - 4</option>
<option value="5">Child3 - 5</option>
</select>
<select name="child4" id="child4" style="display:none">
<option value="1">Child4 - 1</option>
<option value="2">Child4 - 2</option>
<option value="3">Child4 - 3</option>
<option value="4">Child4 - 4</option>
<option value="5">Child4 - 5</option>
</select>
<select name="child5" id="child5" style="display:none">
<option value="1">Child5 - 1</option>
<option value="2">Child5 - 2</option>
<option value="3">Child5 - 3</option>
<option value="4">Child5 - 4</option>
<option value="5">Child5 - 5</option>
</select>
4

2 に答える 2

1

onclickの代わりにonchangeを使用する必要があります

これは、親selectの値が非表示および表示するselectのIDと一致する限り、IDSが何であるかを気にしない完全なソリューションです。

デモ

window.onload=function() {
  document.getElementById("disc").onchange=function() {
    hideAll(this); 
    var id = this.value;
    if (id) show(id);
  }
}

function show(id) {
    var el = document.getElementById(id);
    if (el) el.style.display = "block";
    else alert("No such ID as "+id);
}

function hide(id) {
    var el = document.getElementById(id);
    el.style.display  = "none";
}

function hideAll(sel) {
  var allSels=document.getElementsByTagName("select");
  for (var i=0;i<allSels.length;i++) {
      if (allSels[i]!=sel) {
          console.log(allSels[i].id)
          allSels[i].style.display='none';
      }    
  }
}
于 2013-03-08T15:44:00.630 に答える
0

これを試して

 <select name="parent" id="parent" onChange="showHide(this.id)">

      function showHide(id)
     {
        hideAll();
       var elementId = document.getElementById(id).value ;
       document.getElementById("child"+elementId).style.display= "block";

     }
于 2013-03-08T15:38:28.070 に答える