Divs onChange 숨기기/표시

Question

양식 필드가있는 다양한 div가 있습니다. 드롭 다운 목록을 기반으로, 나는 해당 값에 해당하는 div를 표시하고 다른 모든 div를 숨길 필요가 있습니다. (아마도 모든 div를로드하고 그냥 숨기는 것보다 효율적인 방법이 있습니다. 확실하지 않습니다.)

<select id="group" name="group"> 
    <option></option> 
    <option value="8">Testing This Stuff</option> 
    <option value="9">Testing Other Stuff</option> 
</select> 

<div id="8" style="display:none;">**form fields**</div> 
<div id="9" style="display:none;">**different form fields**</div> 

그리고 현재, 반 가공 자바 스크립트 : 내가 뭘 얻고 것은

<script type="text/javascript"> 
window.onload = function() { 
    var eSelect = document.getElementById('group'); 
    eSelect.onchange = function() { 
    var id = eSelect.selectedIndex; 
    document.getElementById(id).style.display = 'block'; 
    } 
} 
</script> 

'ID가'입니다 피난처 내가 그래서 널을

은 내가 지금있는 것은 이것이다 그 부분을 아직 지나칠 수는 없었습니다.

파트 2는 이전 div를 숨기고 새 div를 표시합니다 (선택한 옵션을 변경하려는 경우). 어떤 제안?

해결책 :

<script type="text/javascript"> 
    window.onload = function() { 
     var current; 
     var eSelect = document.getElementById('group'); 
     eSelect.onchange = function() { 
      var id = eSelect.value; 
      if (current && current != id) { 
       document.getElementById(current).style.display = 'none' 
      } 
      document.getElementById(id).style.display = 'block'; 
      current = id; 
     } 
    } 
</script> 

<select id="materialsgroup" class="formInput" name="materialsgroup"> 
    <option value=""></option> 
    <option value="groupid_8">Testing This Stuff</option> 
    <option value="groupid_9">Testing Other Stuff</option> 
</select> 

<div id="groupid_8">**form fields**</div> 
<div id="groupid_9">**more form fields**</div> 

이 선택하고있는 div를 만들려면,이 내가 무슨 짓을했는지 있습니다 :

foreach($groups as $key=>$value) 
{ 
     $valueItem = "groupid_".$value['group_id']; 
     $text = $value['title']; 
     $htmlString .= sprintf('<option value="%s">%s</option>', $valueItem, $text); 
} 

echo '<tr> 
    <td class="formLabelCell">Group</td> 
    <td class="formInputCell"> 
    <select id="group" class="formInput" name="group">'.$htmlString.'</select></td></tr>'; 

foreach($groups as $gkey=>$gvalue) 
{ 
    echo '<div id=groupid_'.$groups[$gkey]['group_id'].' style="display:none;">'; 
    //**Draw the form stuff here** 
    echo '</div>'; 
} 

Answer 1

두 번째의 경우

var id = eSelect.value; 

를 사용해보십시오 , 당신은 순수한 자바 스크립트를 사용하는 경우 (내 말은, 당신은 같은 자바 스크립트 프레임 워크를 사용하지 않는거야 jQuery를이) 아마 좋은 해결책은 현재의 변수를 사용하는 방법에 대해 무엇을 나 자신 초보자 자바 스크립트를 해요! = 사업부를 숨기고, 사업부의 ID를 포함하는 배열을로드하고를 반복 eSelect.value

var arrDivs = new Array("1","2","3"); 
for (var i=0; i < arrDivs.length; i++) { 
    if (arrDivs[i] == eSelect.value) 
     document.getElementById(arrDivs[i]).style.display = 'block'; 
    else 
     document.getElementById(arrDivs[i]).style.display = 'none'; 
} 

Answer 2

이지만, 어느 div가 보여지는지를 보여줍니다 (따라서 어느 div가 숨길지를 안다)? 나는 전체 일을 표시 할 수 없습니다 때문에

window.onload = function() { 
    var current, eSelect = document.getElementById('group'); 
    eSelect.onchange = function() { 
    var id = eSelect.value; 
    if (current && current != id) { 
     document.getElementById(current).style.display = 'none' 
    } 
    document.getElementById(id).style.display = 'block'; 
    current = id; 
    } 
} 

Answer 3

window.onload = function() { 
    var current, eSelect = document.getElementById('group'); 
    eSelect.onchange = function() { 
    var id = eSelect.value; 
    if (current && current != id) { 
     document.getElementById(current).style.display = 'none' 
    } 
    document.getElementById(id).style.display = 'block'; 
    current = id; 
    } 
}