2

基本上我要做的是<select>根据内容更改＃2中的选项<select>，然后第二个<select>显示第三个<select>

我一直在试图使用我从上一个问题的答案中得到的东西，我曾问过在哪里<select>更改了使用 php 显示的页面。但是当我试图让它适应我现在想做的事情但它不起作用时，因为首先我会在一个表单中放置一个表单，这不是一个好主意，其次是它改变第二组的方法of content 是通过使用onchange="this.form.submit()which 提交整个表单，而不是仅仅更改第二个内容。

在做了一些研究之后，我在这个网站上发现了类似的查询，但我发现的那些人只想要两组内容，包括国家和州，这对我不起作用，因为我需要 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。

感谢您的帮助！谢谢！

4

2 回答 2

1

这是你的一个开始：jsFiddle 示例

我稍微修改了您的 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();
    }
});

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

于 2013-03-22T16:22:28.830 回答
0

还稍微更改了您的 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; }
于 2013-03-22T18:13:50.217 回答