JS顯示：通過下拉

無/塊我有一個選擇欄形式是這樣的：JS顯示：通過下拉

<select onchange="toggle_form_element(this)" name="parts" id="parts"> 
    <option value="-">Please choose</option> 
    <option value="0">Part 1</option> 
    <option value="1">Part 2</option> 
    <option value="2">Part 3</option> 
</select>

下面這個表格有一些div的，並且我希望做的顯示/隱藏這些DIV基於選定的選項在下拉字段中。例如：

<div id="Form1">Part 1</div> 
<div id="Form2">Part 2</div> 
<div id="Form3">Part 3</div>

我的解決辦法得到這個工作如下js代碼：

<script type="text/javascript"> 
    function toggle_form_element(select) { 
     if (select.value == '0') { 
      document.getElementById('Form1').style.display = 'block'; 
      document.getElementById('Form2').style.display = 'none'; 
      document.getElementById('Form3').style.display = 'none'; 
     }else if (select.value == '1') { 
      document.getElementById('Form1').style.display = 'none'; 
      document.getElementById('Form2').style.display = 'block'; 
      document.getElementById('Form3').style.display = 'none'; 
     }else if (select.value == '2') { 
      document.getElementById('Form1').style.display = 'none'; 
      document.getElementById('Form2').style.display = 'none'; 
      document.getElementById('Form3').style.display = 'block'; 
     }else{ 
      document.getElementById('Form1').style.display = 'none'; 
      document.getElementById('Form2').style.display = 'none'; 
      document.getElementById('Form3').style.display = 'none'; 
     } 
    } 
</script>

現在我想知道是否有辦法使它更短，更簡單！？因爲我必須在選擇字段中添加更多選項。

來源

2013-05-28 emjay

嗨，有人在這裏張貼了這個解決方案：http://jsfiddle.net/dfQXP/現在被刪除。這個解決方案有問題嗎？ – emjay

有人知道一個解決方案，如果我有不同的價值觀？我想使用像「沃爾沃」，「薩博」等值。 – emjay

你可以這樣做：

function toggle_form_element(select) { 
    var divSelect = select.value; 
    var elements = document.getElementsByTagName("div"); 

    for (var i = 0; i < elements.length; i++) { 
     if (i == divSelect) { 
      elements[i].style.display = "block"; 
     } else { 
      elements[i].style.display = "none"; 
     } 
    } 
}

演示：http://jsfiddle.net/ZRhvx/

來源

2013-05-28 19:15:18 tymeJV

此解決方案將隱藏文檔中的所有div，除非它在getElementsByTagName返回的列表中的位置與select.value相同。 – stackunderflow

function toggle_form_element(select) { 
    document.getElementById('Form1').style.display = 'none'; 
    document.getElementById('Form2').style.display = 'none'; 
    document.getElementById('Form3').style.display = 'none'; 
    //only for your example  
    document.getElementById('Form'+(parseInt(selected.value)+1)).style.display = 'block'; 

}

來源

2013-05-28 19:12:25 ram2013

你也可以傳遞你的表單的ID ..然後只是做一個document.getElementById（select.value）.style.display ='block' ; –

這裏是我的回答，也可作爲jsFiddle

雖然涉及在位這個簡單的級別表明了dynami的方法cally操縱CSS規則只涉及到的元素，即＃Form1到＃Form3。

隨着複雜性的增長，這可能會更好地擴展。

一個額外的靜態CSS規則設置一個封閉的div不顯示它的內容和子級。

CSS

#hidingForms * { 
    display:none; 
}

HTML + JS

<script type="text/javascript"> 
    function toggle_form_element(select) { 
     var lastStyleSheet, r, lastRule, myRule; 
     myRule = '#' + select.value + ' { display: block; }'; 
     ss = document.styleSheets; 
     if (ss.length > 0) { 
      lastStyleSheet = ss[ss.length - 1]; 
      r = lastStyleSheet.cssRules; 
      if (r.length > 0) { 
       lastRule = r[r.length - 1]; 
       // debugger; 
       if (lastRule && lastRule.cssText.match(/#Form/)) { 
        lastStyleSheet.deleteRule(lastStyleSheet.cssRules.length - 1); 
       } 
       if (select.value !== '-') { 
        lastStyleSheet.insertRule(myRule, lastStyleSheet.cssRules.length); 
       } 
       // console.dir(lastStyleSheet.rules); 
      } 
     } 
    } 
</script> 
<select onchange="toggle_form_element(this)" name="parts" id="parts"> 
    <option value="-">Please choose</option> 
    <option value="Form1">Part 1</option> 
    <option value="Form2">Part 2</option> 
    <option value="Form3">Part 3</option> 
</select> 
<div id="hidingForms"> 
    <div id="Form1">Part 1</div> 
    <div id="Form2">Part 2</div> 
    <div id="Form3">Part 3</div> 
</div>

來源

2013-05-29 00:00:45 stackunderflow

JS顯示：通過下拉

回答

相關問題