Question

基本上我要做的是根据<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。

我很感激帮助！ 感谢！

Answer 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();
    }
});

根据您的确切需求，我会想到这可以简化一下。

Answer 2

还改了你的HTML。流线型。 http://jsfiddle.net/mwk97/

的jQuery

$('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();
    });
});

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="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>

当然只是一点......

CSS

.subselect { display: none; }
.subsub { display: none; }

<select>根据其他</select>值更改

2 个答案:

的jQuery

HTML

CSS