繁体   English   中英

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

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

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

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

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

您可以处理更改事件:

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]),连字符(“ - ”),下划线(“_”) ,冒号(“:”)和句号(“。”)。

更多信息在这里

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

使用适当的事件附件方法(但未经过测试),这里有些快速而又脏的东西:

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);
});

有关为什么需要onchangeonkeypress的解释,请参阅此问题

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

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

1 显示隐藏选择框并根据选择选择框选项

我有一个JSON数组来隐藏特定的选项并根据selection选择框.Parent选项和值用于选择和子选项和值应隐藏在该选择上。它没有按预期工作。这是当前发生的40mm energisprosser从Sprosser选择它隐藏了Udluftningsventil和Udluftningsventil ...

2 隐藏/显示在jQuery中的选择框选项?

我在jsp中有以下代码片段 在单击某些按钮时,我要隐藏ID为“ action1”的选项,并显示ID为“ action2”的选项。 所以我尝试了这个 但这没有用。没有得到什么问题? 在萤火虫中,当我尝试检查选择框时,未在选项上方找到任何div标签(即,具有ids action1 ...

5 根据下拉框选择显示或隐藏选择框

我正在尝试根据第一个选择框选项隐藏或显示选择框。 我不太确定为什么不起作用。 另一件事是,如何在一个部分中添加多个ID(如果用户选择“项目”或“ mods”以显示选择框2)? 选择框1: 选择框2: HTML中的JS: 如果有人对如何解决此问题有任何想法,请告诉 ...

6 根据链接显示选择框选项

我有一个JSP页面。 我创建了一些链接。 类似于我创建了许多链接。 我也有一个选择框 我想要的是,当我点击组织数据时 ,选择框应该只显示第一个和第二个选项( 来自数据库和文件 ),如果我选择业务单位 ,我想只显示下两个选项,如果我选择第三个选项,我需要显示所有选项,如果我点击 ...

7 根据复选框选择显示/隐藏选项卡

我在一个JSP页面上有4个选项卡。 让我们说Tab 1,Tab2,Tab3,Tab4。 最初启用Tab1意味着用户可以自由地在Tab1上完成工作,但其他选项卡(Tab2,Tab3,Tab4)被禁用,这意味着当用户点击Tab2或Tab3或Tab4时,他无法看到这些选项卡的内容。 我的第一个选 ...

8 jQuery / Js:根据选择框选项值隐藏/显示Div

这些是依赖于动态的选择控件。 值集(1-3、4-6、7-9)确定使用隐藏/显示divs功能。 问题是我只能根据div id隐藏/显示功能。 如何根据选择框中找到的值(1-3、4-6、7-9)来使函数隐藏/显示div? jQuery的 HTML设置 ...

10 选择框选项在IE浏览器中隐藏显示

我已经实现了jquery以从多个选择框中删除重复的选择选项(如果已经选择)。 在Firefox和chrome中可以正常工作。 但是,当我在IE中尝试相同操作时,它会失败。 重复的问题不会从列表中删除/隐藏。 我缺少在IE中实现相同功能的东西。 的jsfiddle ...

暂无
暂无

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

 
粤ICP备18138465号  © 2020-2021 STACKOOM.COM