[英]JavaScript dependent drop down list
How do you make a dependent drop down list with JavaScript? 如何使用JavaScript创建依赖下拉列表?
I need first category list to trigger other 2 (or more) categories to show up with lists that depends on what was your selection on first category. 我需要第一个类别列表来触发其他2个(或更多)类别以显示列表,这些列表取决于您对第一个类别的选择。
Is that possible? 那可能吗?
Here's my code : 这是我的代码:
<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 : 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>
I believe it is not possible to create a third list that would be triggered by choosing "Home ware" and have different selections? 我相信不可能通过选择“Home ware”来创建第三个列表,并且有不同的选择?
I review this solution because an OP (thx @stavasknall) told me that my solution doesn't work in Safari. 我查看了这个解决方案,因为OP(thx @stavasknall)告诉我,我的解决方案在Safari中不起作用。
In some browser (like Safari) the <option>
inside a <select>
can't be hided via CSS, if you set (in css or via Jquery) style="display:none"
Safari simply ignores it. 在某些浏览器(如Safari)中,
<option>
<select>
的<option>
不能通过CSS隐藏,如果你设置(在css中或通过Jquery) style="display:none"
Safari只是忽略它。
To target the OP goal is necessary to manipulate the DOM to change the <option>
inside e selection, to do this there are a lot of solution i follow this one: 要定位OP目标是必要的,以操纵DOM来改变e选择中的
<option>
,为此我有很多解决方案,我遵循这个:
<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>
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);
});
In this the script save the s html inside a Javascript object (based on <select>
ID
and <optgroup>
data-rel
) and remove them from the DOM. 在此脚本中将s html保存在Javascript对象中(基于
<select>
ID
和<optgroup>
data-rel
)并将其从DOM中删除。 With this solution when a <select>
change the script find the related option and print it in the relative <select>
. 使用此解决方案,当
<select>
更改脚本时,找到相关选项并将其打印在相对<select>
。
Like in other solution also in this one you must include jQuery and you have to wrap the Javascript inside DOMready listener
or at the end of the <body>
. 就像在其他解决方案中一样,你必须包含jQuery,你必须将Javascript包装在
DOMready listener
或<body>
的末尾。
http://jsfiddle.net/v917ycp6/595 http://jsfiddle.net/v917ycp6/595
I change your HTML
, JS
, CSS
to prevent the excessive use of Javascript. 我改变你的
HTML
, JS
, CSS
以防止过度使用Javascript。
jQuery
(a simple JS library that help you to create complex thing) jQuery
(一个简单的JS库,帮助你创建复杂的东西) <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>
take a look: I use rel
attribute to link category and sub category (to lowercase and without space or special Char): 看看:我使用
rel
属性链接类别和子类别(小写,没有空格或特殊字符):
<option rel="home_ware" value="">Select Category1</option>
#category2 option{
display:none;
}
#category2 option.label{
display:block;
}
this CSS hide the subcategory options (not label) that show only if the main category is seleceted. 此CSS隐藏仅在主要类别被选中时显示的子类别选项(不是标签)。
<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>
I use jQuery because is simple, clean, and you write less code. 我使用jQuery因为它简单,干净,而且你编写的代码更少。 Take a look to jQuery's Documentation: http://api.jquery.com/ .
看看jQuery的文档: http : //api.jquery.com/ 。 If you never use it, you should.
如果你从不使用它,你应该。
This resurce is needed 这需要重新开始
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
http://jsfiddle.net/v917ycp6/5/ http://jsfiddle.net/v917ycp6/5/
If you need to enable multiple <select>
after you check one option of category1
you simply change the selector of the variable $subcat
to select more than one <select>
. 如果在检查
category1
一个选项后需要启用多个<select>
,则只需更改变量$subcat
的选择器以选择多个<select>
。
add class .subcat
to all <select>
you need to enable when select category1
: 将class
.subcat
添加到选择category1
时需要启用的所有<select>
:
<select disabled="disabled" id="category2" name="category2">
becomes: 变为:
<select disabled="disabled" id="category2" class="subcat" name="category2">
Now, add the new <select>
to your code: 现在,将新的
<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>
NOTE: <option>
have already rel
注意:
<option>
已经是rel
$subcat = $("#category2");
becomes $subcat = $(".subcat");
变成
$subcat = $(".subcat");
.subcat option{
display:none;
}
.subcat option.label{
display:block;
}
#category2
becomes .subcat
. #category2
变成.subcat
。
This implementation generalizes the behavior for each select
that has class subcat
. 此实现概括了具有类
subcat
每个select
的行为。
http://jsfiddle.net/v917ycp6/9/ http://jsfiddle.net/v917ycp6/9/
I'm not English, and right now I haven't time to correct my grammar errors, sorry. 我不是英国人,现在我没有时间纠正我的语法错误,对不起。 :( My Bad.
:( 我的错。
Basic example (just javascript, no jQuery): 基本示例(只是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.