根據所選內容展開和摺疊多個DIV元素

Question

我需要一些JavaScript幫助。這需要改變。

我的HTML有一個默認選擇一個dropddown列表 「中選擇一個」

• 新用戶
• 以前的用戶
• 現有用戶

我有4個div在我的HTML id new/previous/existing and existinginfo

頁面始於所有div已關閉，但我想更改代碼以修改它們以顯示取決於所選下拉列表的內容。

如果選擇下拉列表爲New user只顯示「新」div其他已關閉。

Previous user - NEW和示他人PREVIOUSdiv的關閉。

existing user現有div顯示，並顯示現有的信息div（新和先前關閉）。

我相信我需要有哪些是/我slideuprunnew的副本與addtional名稱（即slideuprunPrev和SlideDownRunPrev）slidedownRunnew功能的附加功能，但我有很多的問題，工作如何做Slide()功能和正確嵌套所有的if。

<script type="text/javascript"> 
var sliderIntervalId = 0; 
var sliderHeight = 1; 
var sliding = false; 
var slideSpeed = 5; 

function Slide() { 
    var selected = document.getElementById('selection'); 
    if (sliding) 
     return; 
    sliding = true; 

    if (sliderHeight == 150 && selected.value != "new user") 
     sliderIntervalId = setInterval('SlideUpRunNEW()', 30); 
    else { 

     if (selected.value == "new user") 
      sliderIntervalId = setInterval('SlideDownRunNEW()', 30); 

     else { 
      sliding = false; 
      return; 
     } 
    } 
} 


function SlideUpRunNEW() { 
    slider = document.getElementById('new'); 
    if (sliderHeight <= 1) { 
     sliding = false; 
     sliderHeight = 1; 
     slider.style.height = '1px'; 
     clearInterval(sliderIntervalId); 
    } 
    else { 
     sliderHeight -= slideSpeed; 
     if (sliderHeight < 1) 
      sliderHeight = 1; 
     slider.style.height = sliderHeight + 'px'; 
    } 
} 

function SlideDownRunNEW() { 
    slider = document.getElementById('new'); 
    if (sliderHeight >= 150) { 
     sliding = false; 
     sliderHeight = 150; 
     slider.style.height = '150px'; 
     clearInterval(sliderIntervalId); 
    } 
    else { 
     sliderHeight += slideSpeed; 
     if (sliderHeight > 150) 
      sliderHeight = 150; 
     slider.style.height = sliderHeight + 'px'; 
    } 
} 

</script> 

Answer 1

看看這裏：http://jsfiddle.net/uZcTH/

我用JQuery的，如果你只需要純JavaScript，那麼這些是不是你要找的機器人。

JS

$("#newUser").show(); 
$("#previousUser").hide(); 
$("#existingUser").hide(); 

$("#userPicker").change(function() { 
    var val = $(this).val(); 
    switch (val) { 
     case "1": 
      $("#newUser").show(); 
      $("#previousUser").hide(); 
      $("#existingUser").hide(); 
      break; 
     case "2": 
      $("#newUser").hide(); 
      $("#previousUser").show(); 
      $("#existingUser").hide(); 
      break; 
     case "3": 
      $("#newUser").hide(); 
      $("#previousUser").hide(); 
      $("#existingUser").show(); 
      break; 
    } 
}); 

HTML

<select id="userPicker"> 
    <option value="1">New User</option> 
    <option value="2">Previous User</option> 
    <option value="3">Existing User</option> 
</select> 
<div id="newUser">new user</div> 
<div id="previousUser">previous user</div> 
<div id="existingUser">existing user</div> 

希望它能幫助，視

---

編輯

純JS版在這裏：http://jsfiddle.net/uZcTH/2/

CODE

document.getElementById("newUser").style.display = "none"; 
document.getElementById("previousUser").style.display = "none"; 
document.getElementById("existingUser").style.display = "none"; 

document.getElementById("userPicker").onchange = function() { 
    switch (this.selectedIndex) { 
     case 0: 
      document.getElementById("newUser").style.display = "block"; 
      document.getElementById("previousUser").style.display = "none"; 
      document.getElementById("existingUser").style.display = "none"; 
      break; 
     case 1: 
      document.getElementById("newUser").style.display = "none"; 
      document.getElementById("previousUser").style.display = "block"; 
      document.getElementById("existingUser").style.display = "none"; 
      break; 
     case 2: 
      document.getElementById("newUser").style.display = "none"; 
      document.getElementById("previousUser").style.display = "none"; 
      document.getElementById("existingUser").style.display = "block"; 
      break; 
    } 
}