基本上我要做的是根据<select>
的内容更改<select>
#2中的选项,然后第二个<select>
显示第三个<select>
}
我一直在试图使用我在上一个问题中从答案中得到的内容,我问过<select>
更改了使用php显示的页面。 但是当我试图将它调整到我现在想要做的但是它不会起作用,因为首先我要在表单中放置一个表单,这不是一个好主意,其次是方法更改第二组内容的方法是使用提交整个表单的onchange="this.form.submit()
而不是仅更改第二个内容。
在做了一些研究之后,我在这个网站上发现了类似的查询,但是我发现的那些人只是想要两组内容,其中包括国家和州,这对我来说不起作用,因为我需要3组选择。
这是我需要的简化方式:
<select name="topselect">
<option>Select Something</option>
<option value="1">Selecting this displays select1</option>
<option value="2">Selecting this displays select2</option>
</select>
<select name="select1">
<option>This displays sub1select1</option>
<option>this displays sub1select2</option>
</select>
<select name="sub1select1">
<option>La Dee Da</option>
<option>La Dee Da</option>
</select>
<select name="sub1select2">
<option>La Dee Da</option>
<option>La Dee Da</option>
</select>
<select name="select2">
<option>This displays sub2select1</option>
<option>this displays sub2select2</option>
</select>
<select name="sub2select1">
<option>La Dee Da</option>
<option>La Dee Da</option>
</select>
<select name="sub2select2">
<option>La Dee Da</option>
<option>La Dee Da</option>
</select>
我确实找到了一种使用jquery 执行此操作的方法,但是它只显示了如何使用2 <select>
执行此操作。我试图修改它无济于事。这是代码:
$('select[name="topselect"]').change(function(){
$('.hidden').hide();
if(this.value == 1){
$('select[name="select1"]').toggle();
}
else if(this.value == 2){
$('select[name="select2"]').toggle();
}
});
我没有包含class="hidden"
选项的display:none
。
我很感激帮助! 感谢!
答案 0 :(得分:1)
以下是您的开始: jsFiddle example
我修改了一下你的HTML,使其更直观。这是HTML和jQuery:
<强> HTML
<select name="topselect">
<option>Select Something</option>
<option value="1">Selecting this displays select1</option>
<option value="2">Selecting this displays select2</option>
</select>
<select name="select1" class="hidden_1">
<option>Select Something</option>
<option>This displays sub1select1</option>
<option>this displays sub1select2</option>
</select>
<select name="sub1select1" class="hidden_2">
<option>sub1select1 La Dee Da</option>
<option>sub1select1 La Dee Da</option>
</select>
<select name="sub1select2" class="hidden_2">
<option>sub1select2 La Dee Da</option>
<option>sub1select2 La Dee Da</option>
</select>
<select name="select2" class="hidden_1">
<option>Select Something</option>
<option>This displays sub2select1</option>
<option>this displays sub2select2</option>
</select>
<select name="sub2select1" class="hidden_2">
<option>sub2select1 La Dee Da</option>
<option>sub2select1 La Dee Da</option>
</select>
<select name="sub2select2" class="hidden_2">
<option>sub2select2 La Dee Da</option>
<option>sub2select2 La Dee Da</option>
</select>
<强>的jQuery
$('select[name="topselect"]').change(function () {
$('.hidden, .hidden_1, .hidden_2').hide();
if (this.value == 1) {
$('select[name="select1"]').toggle();
} else if (this.value == 2) {
$('select[name="select2"]').toggle();
}
});
$('select[name="select1"]').change(function () {
$('.hidden_2').hide();
if ($(':selected', this).index() == 1) {
$('select[name="sub1select1"]').toggle();
} else if ($(':selected', this).index() == 2) {
$('select[name="sub1select2"]').toggle();
}
});
$('select[name="select2"]').change(function () {
$('.hidden_2').hide();
if ($(':selected', this).index() == 1) {
$('select[name="sub2select1"]').toggle();
} else if ($(':selected', this).index() == 2) {
$('select[name="sub2select2"]').toggle();
}
});
根据您的确切需求,我会想到这可以简化一下。
答案 1 :(得分:0)
还改了你的HTML。流线型。 http://jsfiddle.net/mwk97/
$('document').ready(function() {
var currentList;
$('select[name="topselect"]').on('change', function () {
$('select:not("[name=topselect]")').hide();
currentList = this.value;
$('select[name="select'+currentList+'"]').show();
});
$('.subselect').on('change', function() {
$('.subsub').hide();
var nameSelector = '[name="sub' + currentList + 'select' + this.value + '"]';
$('select'+nameSelector).show();
});
});
<select name="topselect">
<option>Select Something</option>
<option value="1">Selecting this displays select1</option>
<option value="2">Selecting this displays select2</option>
</select>
<select name="select1" class="subselect">
<option>Select Something</option>
<option value="1">This displays sub1select1</option>
<option value="2">this displays sub1select2</option>
</select>
<select name="sub1select1" class="subsub">
<option>La Dee Da 11</option>
<option>La Dee Da 11</option>
</select>
<select name="sub1select2" class="subsub">
<option>La Dee Da 12</option>
<option>La Dee Da 12</option>
</select>
<select name="select2" class="subselect">
<option>Select Something</option>
<option value="1">This displays sub2select1</option>
<option value="2">this displays sub2select2</option>
</select>
<select name="sub2select1" class="subsub">
<option>La Dee Da 21</option>
<option>La Dee Da 21</option>
</select>
<select name="sub2select2" class="subsub">
<option>La Dee Da 22</option>
<option>La Dee Da 22</option>
</select>
当然只是一点......
.subselect { display: none; }
.subsub { display: none; }