Question

我正在寻找2天的解决方案来显示/隐藏div，包括下拉菜单，具体取决于所选的值。

到目前为止我的尝试：

$(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. Level，但适用于：

    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插件Wordpress，它应该没问题，因为代码适用于1.级别。

我希望有人能给我一个有用的提示。

TY

Answer 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和选项值也不复杂......

jQuery显示/隐藏div与下拉更多级别

1 个答案: