JavaScript 相关下拉列表答案

【问题标题】：JavaScript dependent drop down listJavaScript 相关下拉列表
【发布时间】：2015-04-14 09:01:43
【问题描述】：

如何使用 JavaScript 制作依赖下拉列表？

我需要第一个类别列表来触发其他 2 个（或更多）类别来显示列表，这取决于您在第一个类别中的选择。

这可能吗？

这是我的代码：

<code> 

function dropdownlist(listindex)
 {

document.formname.category2.options.length = 0;
 switch (listindex)
 {

 case "Home Ware" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
 document.formname.category2.options[2]=new Option("Audio/Video","Audio/Video");
 document.formname.category2.options[3]=new Option("Beddings","Beddings");
 document.formname.category2.options[4]=new Option("Camera","Camera");
 document.formname.category2.options[5]=new Option("Cell Phones","Cell Phones");

 break;

 case "Education" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("Colleges","Colleges");
 document.formname.category2.options[2]=new Option("Institutes","Institutes");
 document.formname.category2.options[3]=new Option("Schools","Schools");
 document.formname.category2.options[4]=new Option("Tuitions","Tuitions");
 document.formname.category2.options[5]=new Option("Universities","Universities");

 break;

 case "Books" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("College Books","College Books");
 document.formname.category2.options[2]=new Option("Engineering","Engineering");
 document.formname.category2.options[3]=new Option("Magazines","Magazines");
 document.formname.category2.options[4]=new Option("Medicine","Medicine");
 document.formname.category2.options[5]=new Option("References","References");

 break;

 }
 return true;
 }
</code>

HTML：

    <form id="formname" name="formname" method="post" action="submitform.asp" >
 <table width="50%" border="0" cellspacing="0" cellpadding="5">
 <tr>
 <td width="41%" align="right" valign="middle">Category1 :</td>
 <td width="59%" align="left" valign="middle"><select name="category1" id="category1" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
 <option value="">Select Category1</option>
 <option value="Home Ware">Home Ware</option>
 <option value="Education">Education</option>
 <option value="Books">Books</option>
 </select></td>
 </tr>
 <tr>
 <td align="right" valign="middle">Category2 :
 </td>
 <td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
 document.write('<select name="category2"><option value="">Select Category2</option></select>')
 </script>
 <noscript><select name="category2" id="category2" >
 <option value="">Select Category2</option>
 </select>
 </noscript></td>
 </tr>
 </table>

</form>

我认为不可能创建通过选择“家居用品”来触发并具有不同选择的第三个列表？

【问题讨论】：

当然可以。向我们提供您到目前为止所做的事情...
Javascript 让一切成为可能 :D - EX。 jsfiddle.net/v917ycp6
蛙嘴，会不会显示2个子类？
@Frogmouth TIL。你只是给了我一个新技巧..我没有意识到下拉列表中的单个元素也是可能的。谢谢你;-)
@dummie ...你可以做所有事情。你需要什么？

标签： javascript html

【解决方案1】：

更新 03/2018

我查看此解决方案是因为 OP（谢谢@stavasknall）告诉我我的解决方案在 Safari 中不起作用。

问题：

在某些浏览器（如 Safari）中，<select> 内的 <option> 无法通过 CSS 隐藏，如果您设置（在 css 中或通过 Jquery）style="display:none" Safari 会忽略它。

我的新解决方案

要针对 OP 目标，必须操作 DOM 以更改 e 选择中的 <option>，为此有很多解决方案我遵循这个：

HTML

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="41%" align="right" valign="middle">Category1 :</td>
    <td width="59%" align="left" valign="middle">
      <select name="category1" id="category1">
        <option value="">Select Category1</option>
        <option value="home_ware">Home Ware</option>
        <option value="education">Education</option>
        <option value="books">Books</option>
      </select>
    </td>
  </tr>
  <tr>
    <td align="right" valign="middle">Category2 :</td>
    <td align="left" valign="middle">
      <select disabled="disabled" class="subcat" id="category2" name="category2">
        <option value>Select Category2</option>
        <!-- Home Ware -->
        <optgroup data-rel="home_ware">
          <option value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
          <option value="audio-video">Audio/Video</option>
          <option value="beddings">Beddings</option>
          <option value="camera">Camera</option>
          <option value="cell-phones">Cell Phones</option>
        </optgroup>
        <!-- Education -->
        <optgroup data-rel="education">
          <option value="Colleges">Colleges</option>
          <option value="Institutes">Institutes</option>
          <option value="Schools">Schools</option>
          <option value="Tuitions">Tuitions</option>
          <option value="Universities">Universities</option>
        </optgroup>
        <!-- Books -->
        <optgroup data-rel="books">
          <option value="College Books">College Books</option>
          <option value="Engineering">Engineering</option>
          <option value="Magazines">Magazines</option>
          <option value="Medicine">Medicine</option>
          <option value="References">References</option>
        </optgroup>
      </select>
    </td>
  </tr>
  <tr>
    <td align="right" valign="middle">Category3 :</td>
    <td align="left" valign="middle">
      <select disabled="disabled" class="subcat" id="category3" name="category3">
        <option value>Select Category3</option>
        <!-- Home Ware -->
        <optgroup data-rel="home_ware">
          <option value="foo1">category3 home ware 1</option>
          <option value="foo2">category3 home ware 2</option>
        </optgroup>
        <!-- Education -->
        <optgroup data-rel="education">
          <option value="foo3">category3 Education 1</option>
          <option value="foo4">category3 Education 2</option>
        </optgroup>
        <!-- Books -->
        <optgroup data-rel="books">
          <option value="foo5">category3 Books 1</option>
          <option value="foo6">category3 Books 2</option>
        </optgroup>
      </select>
    </td>
  </tr>
</table>

Javascript

var $cat = $("#category1"),
    $subcat = $(".subcat");

var optgroups = {};

$subcat.each(function(i,v){
  var $e = $(v);
  var _id = $e.attr("id");
  optgroups[_id] = {};
  $e.find("optgroup").each(function(){
    var _r = $(this).data("rel");
    $(this).find("option").addClass("is-dyn");
    optgroups[_id][_r] = $(this).html();
  });
});
$subcat.find("optgroup").remove();

var _lastRel;
$cat.on("change",function(){
    var _rel = $(this).val();
    if(_lastRel === _rel) return true;
    _lastRel = _rel;
    $subcat.find("option").attr("style","");
    $subcat.val("");
    $subcat.find(".is-dyn").remove();
    if(!_rel) return $subcat.prop("disabled",true);
    $subcat.each(function(){
      var $el = $(this);
      var _id = $el.attr("id");
      $el.append(optgroups[_id][_rel]);
    });
    $subcat.prop("disabled",false);
});

在此脚本中，将 s html 保存在 Javascript 对象中（基于 <select> ID 和 <optgroup> data-rel）并将它们从 DOM 中删除。使用此解决方案，当<select> 更改脚本时，找到相关选项并将其打印在相对<select> 中。

与其他解决方案一样，在这个解决方案中，您必须包含 jQuery，并且您必须将 Javascript 包装在 DOMready listener 或 <body> 的末尾。

工作示例：

http://jsfiddle.net/v917ycp6/595

原始解决方案

（非跨浏览器 - 不适用于 webkit）

我更改了你的HTML、JS、CSS，以防止过度使用Javascript。

第一：考虑使用jQuery（一个简单的JS库，帮助你创建复杂的东西）
不要在每次您需要更改 HTML 时创建/删除 DOM 元素 - 而是隐藏此元素并显示您需要的所有内容。

HTML

<form id="formname" name="formname" method="post" action="submitform.asp" >
  <table width="50%" border="0" cellspacing="0" cellpadding="5">
    <tr>
      <td width="41%" align="right" valign="middle">Category1 :</td>
      <td width="59%" align="left" valign="middle">
        <select name="category1" id="category1">
          <option value="">Select Category1</option>
          <option value="home_ware">Home Ware</option>
          <option value="education">Education</option>
          <option value="books">Books</option>
        </select>
      </td>
    </tr>
    <tr>
      <td align="right" valign="middle">Category2 :</td>
      <td align="left" valign="middle">
        <select disabled="disabled" id="category2" name="category2">
          <option class="label" value>Select Category2</option>
          <!-- Home Ware -->
          <option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
          <option rel="home_ware" value="audio-video">Audio/Video</option>
          <option rel="home_ware" value="beddings">Beddings</option>
          <option rel="home_ware" value="camera">Camera</option>
          <option rel="home_ware" value="cell-phones">Cell Phones</option>
          <!-- Education -->
          <option rel="education" value="Colleges">Colleges</option>
          <option rel="education" value="Institutes">Institutes</option>
          <option rel="education" value="Schools">Schools</option>
          <option rel="education" value="Tuitions">Tuitions</option>
          <option rel="education" value="Universities">Universities</option>
          <!-- Books -->
          <option rel="books" value="College Books">College Books</option>
          <option rel="books" value="Engineering">Engineering</option>
          <option rel="books" value="Magazines">Magazines</option>
          <option rel="books" value="Medicine">Medicine</option>
          <option rel="books" value="References">References</option>
        </select>
      </td>
    </tr>
  </table>
</form>

看一下：我使用rel属性链接类别和子类别（小写且没有空格或特殊字符）：

<option rel="home_ware" value="">Select Category1</option>

CSS

#category2 option{
    display:none;
}

#category2 option.label{
    display:block;
}

此 CSS 隐藏仅在选择主类别时显示的子类别选项（不是标签）。

JS (jQuery)

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script
<script>
$(function(){

//fisrt I store in 2 var the reference of two <select>

var $cat = $("#category1"),
$subcat = $("#category2");

//this is the same thing if you write in your HTML onChange="" in first <select>

$cat.on("change",function(){

//store the value of first select every time it change
var _rel = $(this).val();

//clean the second select (value and option active) to prevent bad link (cat1 with subcat of cat2)
$subcat.find("option").attr("style","");
$subcat.val("");

//if no option is selected i disable the second select
if(!_rel) return $subcat.prop("disabled",true);

//if a option si selected i show the option linked by rel attr
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
});

});
</script>

我使用 jQuery 是因为它简单、干净，而且你编写的代码更少。查看 jQuery 的文档：http://api.jquery.com/。如果你从不使用它，你应该这样做。

需要这个资源

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

工作示例：

http://jsfiddle.net/v917ycp6/5/

编辑

如果您在选中category1 的一个选项后需要启用多个<select>，您只需将变量$subcat 的选择器更改为选择多个<select>。

HTML

在选择category1时将.subcat类添加到所有需要启用的<select>：

<select disabled="disabled" id="category2" name="category2">

变成：

<select disabled="disabled" id="category2" class="subcat" name="category2">

现在，将新的<select> 添加到您的代码中：

<select disabled="disabled" class="subcat" id="category3" name="category3">
<option value>Select Category3</option>
<!-- Home Ware -->
<option rel="home_ware" value="foo1">category3 home ware 1</option>
    <option rel="home_ware" value="foo2">category3 home ware 2</option>
<!-- Education -->
<option rel="Education" value="foo3">category3 Education 1</option>
<option rel="Education" value="foo4">category3 Education 2</option>

<!-- Books -->
<option rel="Books" value="foo5">category3 Books 1</option>
<option rel="Books" value="foo6">category3 Books 2</option>

注意：<option> 已经有rel

Javascript

$subcat = $("#category2"); 变为 $subcat = $(".subcat");

CSS

.subcat option{
    display:none;
}

.subcat option.label{
    display:block;
}

#category2 变为 .subcat。

此实现概括了每个具有类 subcat 的 select 的行为。

示例

http://jsfiddle.net/v917ycp6/9/

我不是英语，现在我没有时间纠正我的语法错误，抱歉。 :( 我的坏。

【讨论】：

谢谢，太好了，你知道如何制作第 3 个类别，它也会由 category1 触发吗？
如果类别 2 中的其中一个值与 1 个以上类别 1 值共用，该怎么办。例如：如果类别 2 中的“音频/视频”是“家庭用品”和“教育”的从属值？如何实现？
@Frogmouth 你有一个很好的解决方案，但你最新的 Fiddle 在 Apple Safari 中不起作用。你有解决办法吗？
@stavasknall :( 我现在没有用于调试的苹果设备，但我试着看看这个。你还有关于这个问题的其他细节吗？
@Frogmouth，这似乎奏效了！非常感谢！

【解决方案2】：

基本示例（只有 javascript，没有 jQuery）：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <select onChange="jsFunction()" id="selectOpt1">
          <option value="1" selected="selected">1</option>
          <option value="2">2</option>
        </select>
        <select id="selectOpt2">
          <option value="1">FIRST</option>
        </select>
        <select id="selectOpt3">
          <option value="1">FIRST</option>
        </select>
        <script>
            function jsFunction(){
              var list1 = document.getElementById("selectOpt1");
              var myselect = list1.options[list1.selectedIndex].value;
              var list2 = document.getElementById('selectOpt2');
              var list3 = document.getElementById('selectOpt3');
              for (i = 0; i < list2.options.length; i++) {
                list2.options[i] = null;
              }
              for (i = 0; i < list3.options.length; i++) {
                list3.options[i] = null;
              }
              if(myselect==="1"){
                var opt = document.createElement('option');
                opt.value = "1";
                opt.innerHTML = "FIRST";
                list2.appendChild(opt);
                opt = document.createElement('option');
                opt.value = "1";
                opt.innerHTML = "FIRST2";
                list3.appendChild(opt);
              }
              else{
                var opt = document.createElement('option');
                opt.value = "2";
                opt.innerHTML = "SECOND";
                list2.appendChild(opt);
                opt = document.createElement('option');
                opt.value = "1";
                opt.innerHTML = "SECOND2";
                list3.appendChild(opt);
              }
            }
        </script>
    </body>
</html>

【讨论】：

类似的东西，但是当你选择“1”时是否有可能让它显示两个带有“FIRST”和“FIRST2”的框。
就是这样！非常感谢:)
没问题，只要确保你会写出更好的代码。您还可以使用 jQuery 让事情变得更易读和更简单。