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

Question

我是javascript的新手，我真的对我如何做到这一点有任何想法......

我有一个选择框。根据我选择的选项，其他选择框应该是“不可见的”其中一个变为可见。

我不想使用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>

但我认为我面临的挑战是展示我选择的那个并隐藏其他的...... 感谢你的回复

我一直试图解决Justin Johnson的功能，但它对于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);
});

Answer 1

我通常使用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';
  }
}

Answer 2

您可以处理更改事件：

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和NAME令牌必须以a开头   信（[A-Za-z]），可以遵循   由任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（“。”）组成。

更多信息here。

Answer 3

jQuery使事情变得更容易，没有理由不使用它。

但无论如何，您需要使用onChange事件来读取选择的选项，然后在要显示和隐藏的其他框中设置css visible属性。

<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';
    ...
  }
}

此示例假设您已经在onload事件中设置了sbox和someOtherSelect的变量。

Answer 4

使用适当的事件附件方法（但未经过测试），这是快速而又脏的东西：

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一起玩，所以你可以真正学习这门语言。