堆栈内存溢出
  繁体   English   中英

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

[英]How to hide/show select boxes depending on other choosed select box option?

 原文  2009-08-06 17:06:01  5   4    javascript

问题描述

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

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

我一直试图找出Justin Johnson的功能，但它并没有适用于Internet Explorer 7和8。

我会为任何可以帮助我的人发布代码。 我改变了style.display = "none"; for 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);
});

4 个解决方案

解决方案1
 10 已采纳  2009-08-06 17:15:58

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

解决方案2
 2  2009-08-06 17:16:22

您可以处理更改事件： 

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-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”） ，冒号（“：”）和句号（“。”）。

更多信息在这里 。

解决方案3
 1  2009-08-06 17:15:26

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的变量。

解决方案4
 0  2009-08-06 17:22:58

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

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的解释，请参阅此问题 。

查找addEventListener和attachEvent方法，以获取有关特定于浏览器的事件处理及其差异的更多信息。

并且不想与jquery一起使用，因此您可以真正学习语言。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 选择选项后如何取消突出显示 select 元素？ 显示隐藏选择框并根据选择选择框选项 根据其他选定的选项框更改选择框值 根据其他选择列表值显示隐藏选择列表 jQuery在选项选择字段上显示/隐藏，显示我要在所有其他选项上显示的框 切换 HTML 选择框值时如何隐藏/显示 HTML 输入框？ 在选择下拉列表中更改隐藏/显示复选框，具体取决于选项值 下面的“隐藏/显示分区”取决于是否选择了一个选项 JavaScript while循环从其他选择框中获取选择选项和隐藏选项 根据选择选项显示div
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM