0

選択した値に応じてドロップダウンを含むdivを表示/非表示にするソリューションを2日間探しています。

それはこれまでの私の試みです：

$(document).ready(function() {

$("#auswahl_lkw").hide();
$("#auswahl_raupen").hide();
$("#auswahl_teleskopstapler").hide();
$("#auswahl_bagger").hide();
$("#auswahl_gelenk_antrieb").hide();
$("#auswahl_gelenk_elektro").hide();
$("#auswahl_gelenk_diesel").hide();
 $("#auswahl_scheren_antrieb").hide();
$("#auswahl_scheren_elektro").hide();
$("#auswahl_scheren_diesel").hide();

$("#auswahl_hebebuehnen").change(function() {
    if ($("#auswahl_hebebuehnen").val() == "LKW-Hebebühnen") {
        $("#auswahl_lkw").show();

    }
    else {
        $("#auswahl_lkw").hide();

    }

    if ($("#auswahl_hebebuehnen").val() == "Gelenkteleskopbühnen") {
        $("#auswahl_gelenk_antrieb").show();

    }
    else {
        $("#auswahl_gelenk_antrieb").hide();

    }


    if ($("#auswahl_hebebuehnen").val() == "Raupenhebebühnen") {
        $("#auswahl_raupen").show();

    }
    else {
        $("#auswahl_raupen").hide();

    }

    if ($("#auswahl_hebebuehnen").val() == "Scherenhebebühnen") {
        $("#auswahl_scheren_antrieb").show();

    }
    else {
        $("#auswahl_scheren_antrieb").hide();

    }

    if ($("#auswahl_hebebuehnen").val() == "Teleskopstapler") {
        $("#auswahl_teleskopstapler").show();

    }
    else {
        $("#auswahl_teleskopstapler").hide();

    }

    if ($("#auswahl_hebebuehnen").val() == "Bagger") {
        $("#auswahl_bagger").show();

    }
    else {
        $("#auswahl_bagger").hide();

    }
});    
});

このコードは 1. レベルでは非常にうまく機能しますが、次の場合:

    if ($("#auswahl_hebebuehnen").val() == "Gelenkteleskopbühnen") {
        $("#auswahl_gelenk_antrieb").show();

    }
    else {
        $("#auswahl_gelenk_antrieb").hide();

    }

#auswahl_gelenk_antrieb のドロップダウンが表示され、そのオプションに応じて 2 つのオプションを選択できます。別の div #auswahl_scheren_elektro または #auswahl_scheren_diesel が下に表示されます。

HTML コードは Contact form 7 Plugin Wordpress からのもので、コードは 1. レベルで適切に機能するため、問題ないはずです。

誰かが私に役立つヒントを教えてくれることを願っています。

タイ

4

1 に答える 1

1 
$("#auswahl_lkw").hide();
$("#auswahl_raupen").hide();
$("#auswahl_teleskopstapler").hide();
$("#auswahl_bagger").hide();
$("#auswahl_gelenk_antrieb").hide();
$("#auswahl_gelenk_elektro").hide();
$("#auswahl_gelenk_diesel").hide();
 $("#auswahl_scheren_antrieb").hide();
$("#auswahl_scheren_elektro").hide();
$("#auswahl_scheren_diesel").hide();

これの代わりに^

$('.hidden_divs').hide();// give all divs a common class. and give them different ids `//according to the value of the select box;`  


//$("#auswahl_hebebuehnen") << its a select box i think

$("#auswahl_hebebuehnen").change(function() {
$('.hidden_divs').hide();
$('#'+$(this).val()).show();
});

html の例

<div class="hidden_divs" id="LKW-Hebebühnen"></div>
<div class="hidden_divs" id="Gelenkteleskopbühnen"></div>
<div class="hidden_divs" id="Raupenhebebühnen"></div>

その動的な生成IDとオプション値でさえ複雑ではありません...

于 2013-10-23T07:55:27.003 に答える