2

基本的に私がやろうとしているのは<select>、コンテンツに基づいて＃2のオプションを変更し<select>、次にその2番目が3番目<select>を表示することです<select>

<select>PHPを使用して表示されているページをどこで変更するかを尋ねた前の質問の回答から得たものを使用しようとして頭を悩ませてきました。しかし、私が今やりたいことに適応させようとしたとき、最初はフォーム内にフォームを配置することになり、それは良い考えではなく、次に2番目のセットを変更する方法であるため、うまくいきませんコンテンツonchange="this.form.submit()の変更は、2 番目のコンテンツを変更するだけでなく、フォーム全体を送信するものを使用することによって行われます。

いくつかの調査を行った後、このサイトで同様のクエリを見つけましたが、国と州を含む 2 セットのコンテンツが必要なだけの人で、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 でこれを行う 1 つの方法を見つけましたが、 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 に答える