JavaScript相关下拉列表
如何使用JavaScript创建依赖下拉列表 我需要第一个类别列表来触发其他2个(或更多)类别显示列表,这取决于您在第一个类别上的选择 可能吗 这是我的密码:JavaScript相关下拉列表,javascript,html,Javascript,Html,如何使用JavaScript创建依赖下拉列表 我需要第一个类别列表来触发其他2个(或更多)类别显示列表,这取决于您在第一个类别上的选择 可能吗 这是我的密码: <code> function dropdownlist(listindex) { document.formname.category2.options.length = 0; switch (listindex) { case "Home Ware" : document.formname.categor
<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>
类别1:
选择类别1
家用电器
教育类
书
类别2:
document.write('Select Category2')
选择类别2
我相信不可能创建第三个列表,该列表将通过选择“Home ware”触发,并具有不同的选择 基本示例(只有javascript,没有jQuery):
1.
2.
第一
第一
函数jsFunction(){
var list1=document.getElementById(“selectOpt1”);
var myselect=list1.options[list1.selectedIndex].value;
var list2=document.getElementById('selectOpt2');
var list3=document.getElementById('selectOpt3');
对于(i=0;i
2018年3月更新
我回顾这个解决方案是因为一个OP(thx@stavasnall)告诉我我的解决方案在Safari中不起作用
问题是:
在某些浏览器(如Safari)中,如果设置(在CSS中或通过Jquery)style=“display:none”
Safari只是忽略它,则无法通过CSS隐藏
中的
我的新解决方案
为了实现OP目标,需要操纵DOM来更改e选择中的
,为此,我采用了很多解决方案:
HTML
在这种情况下,脚本将s html保存在Javascript对象中(基于
ID
和数据rel
)并将其从DOM中删除。使用此解决方案,当
更改脚本时,找到相关选项并在相对
中打印它
与其他解决方案一样,在这个解决方案中,您必须包含jQuery,并且必须将Javascript封装在DOMready listener
中或
的末尾
工作示例:
原液
(非跨浏览器-不使用webkit)
我更改您的HTML
,JS
,CSS
,以防止过度使用Javascript
第一:考虑使用<代码> jQuery (一个简单的JS库,帮助您创建复杂的事物)
每次需要更改HTML时,不要创建/remvoe DOM元素,而是隐藏此元素并显示所有需要的内容
HTML
CSS
此CSS隐藏仅在选择主类别时显示的子类别选项(而不是标签)
JS(jQuery)
变成:
<select disabled="disabled" id="category2" class="subcat" name="category2">
#category2
变为.subcat
此实现概括了具有classsubcat
的每个select
的行为
例子
我不是英国人,现在我没有时间纠正语法错误,对不起(我的错。当然有可能。请提供我们您到目前为止所做的一切…Javascript使一切成为可能:D-EX.Frogmouth,有可能显示2个子类别吗?@Frogmouth TIL。您刚刚给了我一个新把戏。我不知道下拉列表中的单个元素也有可能。谢谢;-)@dummie。。。你可以做所有的事。你需要什么?类似的东西,但是当你选择“1”时,它会显示两个带有“FIRST”和“FIRST2”的框。这就是它!非常感谢:)没问题,只要确保编写更好的代码即可。您还可以使用jQuery使内容更可读、更简单。谢谢,这很好,您是否知道如何创建第三个类别,该类别也将由类别1触发?如果类别2中的一个值与多个类别1的值共用,该怎么办。例如:如果类别2中的“音频/视频”是“家用电器”和“教育”的从属值?这是怎么实现的?@Frogmouth你有一个简洁的解决方案,但你最新的小提琴在苹果Safari中不起作用。你有解决办法吗?@Stavasnall:(我现在没有苹果设备可以调试,但我试着看看这个。你有关于这个问题的其他细节吗?@Frogmouth,看起来很有效!非常感谢!
<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);
});
<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>
<option rel="home_ware" value="">Select Category1</option>
#category2 option{
display:none;
}
#category2 option.label{
display:block;
}
<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>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<select disabled="disabled" id="category2" name="category2">
<select disabled="disabled" id="category2" class="subcat" name="category2">
<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>
.subcat option{
display:none;
}
.subcat option.label{
display:block;
}