如何根據其他選擇的選擇框選項來隱藏/顯示選擇框？

我是一個新手在JavaScript和我真的aprecciate如何我可以做到這一點的任何想法...如何根據其他選擇的選擇框選項來隱藏/顯示選擇框？

我有一個選擇框。根據我選擇的選項，應該是其中一個「不可見」的其他選擇框變得可見。

我不想使用jquery，因爲我仍然是js中的新手。

對不起，我的英語：P

我會放一些代碼給出的例子：

<select id="tipos_evento"> 
     <option value="">choose an option to see the corresponding select box</option> 
     <option value="tipoe01">option_one</option> 
     <option value="tipoe02">option_two</option> 
     <option value="tipoe03">ssss</option> 
     <option value="tipoe04">ddd</option> 
</select> 

<select id="option_one"> 
     <option value="">ss</option> 
     <option value="c">Cffs</option> 
     <option value="d">s</option> 
     <option value="tipoe03">ssss</option> 
     <option value="tipoe04">ddd</option> 
</select> 

    <select id="option_two"> 
     <option value="">ss</option> 
     <option value="c">Cffs</option> 
     <option value="d">s</option> 
     <option value="tipoe03">ssss</option> 
     <option value="tipoe04">ddd</option> 
</select>

但我覺得對我的挑戰是要表明，我選用了一個隱藏其他的... 感謝ü的答覆

我一直在試圖找出賈斯汀·約翰遜的功能，但它沒有工作的Internet Explorer 7和8

我會發布可以幫助我的任何人的代碼。我改變了style.display = "none"; for style.cssText ='display：none'; 但只有當頁面加載時才起作用。現在，當我改變選擇框時，沒有任何反應。

下面是代碼（它的大，我將與循環優化的時候，這個工程）：

var attachEvento = function(node, event, listener, useCapture) { 
    // Method for FF, Opera, Chrome, Safari 
    if (window.addEventListener) { 
    node.addEventListener(event, listener, useCapture || false); 
    } 
    // IE has its own method 
    else { 
    node.attachEvent('on'+event, listener); 
    } 
}; 


// Once the window loads and the DOM is ready, attach the event to the main 
attachEvento(window, "load", function() { 
    var main_select = document.getElementById("tipos_evento"); 

    var option1 = document.getElementById("temas_conferencias"), 
     option2 = document.getElementById("temas_cursos"), 
     option3 = document.getElementById("temas_provas"), 
     option4 = document.getElementById("temas_visitas"), 
     option5 = document.getElementById("temas_ciencias"), 
     option6 = document.getElementById("temas_dancas"), 
     option7 = document.getElementById("temas_exposicoes"), 
     option8 = document.getElementById("temas_multi"), 
     option9 = document.getElementById("temas_musica"), 
     option10 = document.getElementById("temas_teatro"), 
     option11 = document.getElementById("temas_cultura"), 
     option12 = document.getElementById("temas_desporto"), 
     option13 = document.getElementById("temas_todos"); 


     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: block'; 

    var selectHandler = function() { 

    // Show and hide the appropriate select's 
    switch(this.value) { 
     case "8": 
     // Conferências/colóquios 
     option1.style.display = ""; 
     option2.style.display = "none"; 
     option3.style.display = "none"; 
     option4.style.display = "none"; 
     option5.style.display = "none"; 
     option6.style.display = "none"; 
     option7.style.display = "none"; 
     option8.style.display = "none"; 
     option9.style.display = "none"; 
     option10.style.display = "none"; 
     option11.style.display = "none"; 
     option12.style.display = "none"; 
     option13.style.display = "none"; 
     break; 
     case "10": 
     // Cursos/workshops 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: block'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "7": 
     // provas 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: block'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "9": 
     // visitas/observações 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: block'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "12": 
     // ciencia 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: block'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "2": 
     // danças 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: block'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "1": 
     // exposiçoes 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: block'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "3": 
     // multi 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: block'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "4": 
     // musica 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: block'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "5": 
     // teatro 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: block'; 
     option11.style.cssText='display: none'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "6": 
     // Cultura(outros) 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: block'; 
     option12.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     case "48": 
     // Desporto 
     option1.style.cssText='display: none'; 
     option12.style.cssText='display: block'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option13.style.cssText='display: none'; 
     break; 
     default: 
     // Hide all 
     option1.style.cssText='display: none'; 
     option2.style.cssText='display: none'; 
     option3.style.cssText='display: none'; 
     option4.style.cssText='display: none'; 
     option5.style.cssText='display: none'; 
     option6.style.cssText='display: none'; 
     option7.style.cssText='display: none'; 
     option8.style.cssText='display: none'; 
     option9.style.cssText='display: none'; 
     option10.style.cssText='display: none'; 
     option11.style.cssText='display: none'; 
     option13.style.cssText='display: block'; 
    } 
    }; 

    // Use the onchange and onkeypress events to detect when the 
    // value of main_select has changed 
    attachEvento(main_select, "change", selectHandler); 
    attachEvento(main_select, "keypress", selectHandler); 
});

來源

2009-08-06 dutraveller

請包括一些代碼，以便更精確 – 2009-08-06 17:14:19

嘿，隊友，你的元素ID不能有「/」。另外，我從來沒有這樣做過，所以我不能肯定地說，購買你可能會在ID中使用重音字符時遇到一些問題。任何人都可以評論這個嗎？ – 2009-08-06 17:37:24

謝謝你我只是插入一些複製/粘貼文本..賈斯汀..在現實中我沒有使用:) – dutraveller 2009-08-06 17:37:50

我一般使用mootools，但這應該是通用的。不過，我不能說跨瀏覽器的問題。

<select id='main_select' onchange='show_select()'> 
    <option>1</option> 
    <option>2</option> 
</select> 
<select id='select_1' style='display:none'></select> 
<select id='select_2' style='display:none'></select> 

function show_select() 
{ 
    var main_select = document.getElementById("main_select"); 
    var select_1 = document.getElementById("select_1"); 
    var select_2 = document.getElementById("select_2"); 

    var desired_box = main_select.options[main_select.selectedIndex].value; 
    if(desired_box == 1) { 
    select_1.style.display = ''; 
    select_2.style.display = 'none'; 
    } else { 
    select_2.style.display = ''; 
    select_1.style.display = 'none'; 
    } 
}

來源

2009-08-06 17:15:58

什麼是downvote？ – 2009-08-06 17:17:29

突然使用javascript。 'onchange'不應該在html – 2009-08-06 17:24:15

@Justin：對於初學者來說，使用html屬性比理解所有事件註冊模型簡單得多。 – Joel 2009-08-06 17:29:15

jQuery讓事情變得更容易，我們沒有理由不使用它。

但無論哪種方式，您需要使用onChange事件來閱讀哪些選項被選中，然後設置您想要顯示和隱藏的其他框的CSS可見屬性。

<select name="sbox" onChange="event()"> 
<option value="option 1">option 1</option> 
<option value="option 2">option 2</option> 
</select>

然後，

function event() { 
    switch (sbox.selectedindex) { 
    case 0: 
     someOtherSelect.style.visiblity = 'visible'; 
    ... 
    } 
}

這個例子假定您已經有了S盒的變量，並在onload事件someOtherSelect設置。

來源

2009-08-06 17:15:26 rpjohnst

-1爲obtrusive js。讓我們不要這樣做。 – 2009-08-06 17:16:45

可以辦理變更事件：

document.getElementById('selectBox').onchange = function() { 
    var selectedValue = this.options[this.selectedIndex].value; // get the selected value 

    // Depending on the value selected you can show or hide other elements: 

    if (selectedValue == "1") { 
    document.getElementById('element1').style.display = 'none'; // hide element1 
    document.getElementById('element2').style.display = ''; // show element2 
    } 
};

注：在你的編輯，最後兩個選擇框都爲ID屬性無效字符。

ID和名稱標記必須以字母開頭（[A-ZA-Z]），並且可以通過任意數量的字母之後，數字（[0-9]），連字符（「 - 」），下劃線（「_」），冒號（「：」）和句點（「。」）。

更多信息here。

來源

2009-08-06 17:16:22 CMS

這裏的東西快速和骯髒的，使用合適的事件連接方法（而不是測試）：

var attachEvent = function(node, event, listener, useCapture) { 
    // Method for FF, Opera, Chrome, Safari 
    if (window.addEventListener) { 
    node.addEventListener(event, listener, useCapture || false); 
    } 
    // IE has its own method 
    else { 
    node.attachEvent('on'+event, listener); 
    } 
}; 

// Once the window loads and the DOM is ready, attach the event to the main 
attachEvent(window, "load", function() { 
    var main_select = document.getElementById("tipos_evento"); 

    var selectHandler = function() { 
    var option1 = document.getElementById("option_one"), 
     option2 = document.getElementById("option_two"); 

    // Show and hide the appropriate select's 
    if (this.value == "tipoe1") { 
     // Show option1, hide option2 
     option1.style.display = ""; 
     option2.style.display = "none"; 
    } else if (this.value == "tipoe2") { 
     // Hide option1, show option2 
     option1.style.display = "none"; 
     option2.style.display = ""; 
    } else { 
     // Hide both 
     option1.style.display = "none"; 
     option2.style.display = "none"; 
    } 
    }; 

    // Use the onchange and onkeypress events to detect when the 
    // value of main_select has changed 
    attachEvent(main_select, "change", selectHandler); 
    attachEvent(main_select, "keypress", selectHandler); 
});

對於爲什麼需要兩個onchange和onkeypress的說明，請參閱this question。

查詢addEventListener和attachEvent方法以獲取有關瀏覽器特定事件處理及其差異的更多信息。

並不想用jQuery去，所以你可以真正學習語言。

來源

2009-08-06 17:22:58

什麼是反對票？ – 2009-08-06 17:28:07

謝謝你，賈斯汀。我沒有嘗試過這些代碼，但是如果選擇了一個選項，這會隱藏其他選擇框？ – dutraveller 2009-08-06 17:35:26

我看到你已經添加了示例html。我會更改我的代碼以反映這一點。 – 2009-08-06 17:38:37

如何根據其他選擇的選擇框選項來隱藏/顯示選擇框？

回答

相關問題