如何根据其他选择的选择框选项来隐藏/显示选择框？

我是一个新手在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

如何根据其他选择的选择框选项来隐藏/显示选择框？

回答

相关问题