JQuery показать / скрыть Div с выпадающим больше уровней

Question

JQuery показать / скрыть Div с выпадающим больше уровней

0

Я ищу сейчас 2 дня для решения показать/скрыть divs, включая выпадающие списки в зависимости от выбранного значения.

Это моя попытка:

$(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 из формы контакта 7 Plugin Wordpress, и это должно быть хорошо, потому что код работает хорошо для уровня 1..

Надеюсь, кто-то может дать мне полезный намек.

ти

user2910229 23 окт. 2013, в 10:42

Источник

0

Добро пожаловать в переполнение стека! Не могли бы вы отредактировать свой вопрос и добавить весь соответствующий код, который последовательно воспроизводит проблему? HTML и CSS , на которых работает этот JavaScript, отсутствуют.
andyb 23 окт. 2013, в 08:06

Теги:

jquery

forms

1 ответ

Ещё вопросы

Добро пожаловать в переполнение стека! Не могли бы вы отредактировать свой вопрос и добавить весь соответствующий код, который последовательно воспроизводит проблему? HTML и CSS , на которых работает этот JavaScript, отсутствуют.

Manjunath Hegde · Answer 1 · 2013-10-23T06-42-00.000Z

$("#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();

istead этого ^

$('.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>

даже его динамические, генерирующие идентификаторы и значения опций не сложны...