根据下拉列表中的选定选项显示详细信息
display details base on selected option on drop down
我有一个表单，我将从第一个下拉菜单中进行选择，然后会出现第二个下拉列表。在第二个下拉列表中选择后，它必须显示一些详细信息。详细信息取决于他/她在第二个下拉列表中选择的选项。
这是代码：
<html>
<body>
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="pasta9-12">pasta 9-12</option>
<option value="pasta15-18">pasta 15-18</option>
<option value="entree">entree</option>
</select>
<span id="slist2"></span> <div id="scontent"></div>
<script>
var SList = new Object();
var txtsl2 = '<br> Select Category:';
SList.slist2 = {
"pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"pasta15-18": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"entree": ['chicken', 'fillet', 'pork']
}; //when selected, it should display 'SList.scontent2'
SList.scontent = {
"fettucine jacintha" : 'Price is 700',
"penne bolognese":'Price is 700',
"pasta verde":'Price is 700',
"lasagna roll-ups":'Price is 700',
"baked creamy cheesy penne":'Price is 700',
"trio of sausages fettucine": 'Price is 700'
};
SList.scontent2 = {
"fettucine jacintha" : 'Price is 1000',
"penne bolognese":'Price is 1000',
"pasta verde":'Price is 1000',
"lasagna roll-ups":'Price is 1000',
"baked creamy cheesy penne":'Price is 1000',
"trio of sausages fettucine": 'Price is 1000'
}; // This should be displayed when 'pasta 15-18' is selected.
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = '';
if(SList[slist][option]) {
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'slist2') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(''scontent'', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
}
}
--></script>
</body>
</html>
我想在选择意大利面 9-12 时显示 SList.scontent。并在选择意大利面 15-18 时显示 SList.scontent2。
非常感谢！
<html>
<body>
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="pasta9-12">pasta 9-12</option>
<option value="pasta15-18">pasta 15-18</option>
<option value="entree">entree</option>
</select>
<span id="slist2"></span> <div id="scontent"></div>
<script>
var SList = new Object();
var txtsl2 = '<br> Select Category:';
SList.slist2 = {
"pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"pasta15-18": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"entree": ['chicken', 'fillet', 'pork']
}; //when selected, it should display 'SList.scontent2'
SList.scontent = {
"fettucine jacintha" : 'Price is 700',
"penne bolognese":'Price is 700',
"pasta verde":'Price is 700',
"lasagna roll-ups":'Price is 700',
"baked creamy cheesy penne":'Price is 700',
"trio of sausages fettucine": 'Price is 700'
};
SList.scontent2 = {
"fettucine jacintha" : 'Price is 1000',
"penne bolognese":'Price is 1000',
"pasta verde":'Price is 1000',
"lasagna roll-ups":'Price is 1000',
"baked creamy cheesy penne":'Price is 1000',
"trio of sausages fettucine": 'Price is 1000'
}; // This should be displayed when 'pasta 15-18' is selected.
SList.getSelect = function(slist, option) {
document.getElementById('scontent').innerHTML = '';
if(SList[slist][option]) {
if(slist == 'scontent'){
document.getElementById('scontent').innerHTML = SList[slist][option];
}else if(slist == 'scontent2'){
document.getElementById('scontent').innerHTML = SList[slist][option];
} else if(slist == 'slist2' && option=='pasta9-12') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(''scontent'', this.value);">'+addata+'</select>';
}else if(slist == 'slist2' && option=='pasta15-18'){
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(''scontent2'', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
}
}
--></script>
</body>
</html>我认为这就是你要找的.....
我想出了这个。
<html>
<body>
<!-- The first select list -->
Select: <select name="slist1" onchange="SList.getSelect('slist2', this.value);">
<option>- - -</option>
<option value="pasta9-12">pasta 9-12</option>
<option value="pasta15-18">pasta 15-18</option>
<option value="entree">entree</option>
</select>
<!-- Tags for the second dropdown list, and for text-content -->
<span id="slist2"></span> <div name="scontent" id="scontent"></div> <div name="scontent2" id="scontent2"></div>
<script>
var SList = new Object();
var txtsl2 = '<br> Select Category:';
SList.slist2 = {
"pasta9-12": ['fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"pasta15-18": ['Fettucine jacintha', 'penne bolognese', 'pasta verde', 'lasagna roll-ups','baked creamy cheesy penne', 'trio of sausages fettucine'],
"entree": ['chicken', 'fillet', 'pork']
};
SList.scontent = {
"fettucine jacintha" : 'Price is 700',
"penne bolognese":'Price is 700',
"pasta verde":'Price is 700',
"lasagna roll-ups":'Price is 700',
"baked creamy cheesy penne":'Price is 700',
"trio of sausages fettucine": 'Price is 700'
};
SList.scontent2 = {
"Fettucine jacintha" : 'Price is 1000',
"penne bolognese":'Price is 1000',
"pasta verde":'Price is 1000',
"lasagna roll-ups":'Price is 1000',
"baked creamy cheesy penne":'Price is 1000',
"trio of sausages fettucine": 'Price is 1000'
};
SList.getSelect = function(slist, option) {
document.getElementById('scontent' && 'scontent2').innerHTML = '';
if(SList[slist][option]) {
if(slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
else if(slist == 'scontent2') document.getElementById('scontent2').innerHTML = SList[slist][option];
else if(slist == 'slist2' && option=='pasta9-12') {
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(''scontent'', this.value);">'+addata+'</select>';
}
else if(slist == 'slist2' && option=='pasta15-18'){
var addata = '<option>- - -</option>';
for(var i=0; i<SList[slist][option].length; i++) {
addata += '<option value="'+SList[slist][option][i]+'">'+SList[slist][option][i]+'</option>';
}
document.getElementById('slist2').innerHTML = txtsl2+' <select name="slist2" onchange="SList.getSelect(''scontent2'', this.value);">'+addata+'</select>';
}
}
else if(slist == 'slist2') {
document.getElementById('slist2').innerHTML = '';
}
}
</script>
</body>
</html>
它也:)但我认为你的方式更好。顺便说一句，非常感谢您的帮助！
相关文章：
- 根据所选选项显示/隐藏不同的表单
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- 根据所选选项显示文本
- 禁用浏览器自动选项(显示输入元素中保存的单词）
- 基于所选选项显示asp:TextBox的JavaScript
- 更改选项显示当前时间
- 根据下拉列表中的选定选项显示详细信息
- 如何根据选中的选项显示文本数组
- 根据单独选择的选项显示 HTML 选项
- jQuery不能基于选择选项显示/隐藏元素
- Javascript cookie 用于保存用户首选项并使用共享首选项显示内容
- 根据选择框中的选项显示单选按钮
- 如何在asp.net web应用程序中使用javascript根据下拉列表中选择的选项显示不同的输入类型
- 下拉选项应根据上一个选项显示
- jQuery:根据所选选项显示/隐藏元素
- 选择选项显示/隐藏IE9问题
- 为'
- 我的下拉选项显示按钮时，它不应该'
- 根据选择的选项显示一个Div(带有计算值)——Angular
- 根据带有自定义值属性的选择选项显示图像
