Показать разделение в зависимости от выбора формы

Question

У меня есть форма, над которой я работаю, в которой в качестве первого выбора указывается 3 варианта бренда, мне нужно показать 1 из 3 разделов в зависимости от того, какой выбор был выбран.

Возможно ли это с помощью jQuery? Если да, то на какую функцию я должен смотреть?

Answer 1

Трудно сказать точно, не видя ваш HTML, но есть вероятность, что вы захотите связать обработчик событий change с элементом, который управляет этим выбором.Например:

$("#someSelect").change(function() {
    var selectedVal = $(this).val();
    //Do something based on the selected value
});

Помимо этого, вы, вероятно, захотите взглянуть на методы show и hide.Разместите свою разметку, и вам будет намного легче помочь!

Answer 2

Вы должны взглянуть на http://api.jquery.com/bind/, который позволяет связывать все виды событий dom с функциями.Есть также ярлыки для привязки, которые вы должны использовать здесь .change http://api.jquery.com/change/

Вы должны установить связь между атрибутом value тега option и классом div, который будет показан / скрыт,(Вы можете использовать .show / .hide из jQuery).

Также позаботьтесь о том, что произойдет, когда вы перезагрузите страницу, либо установите выбранный атрибут тега option через внутренний язык, либо проверьте значение, установленное приDOM загружен ($ (document) .ready).

Таким образом, в основном, запустите проверку на domready (какое значение выбрано, скрыть все div, показать правильный), а затем привязать событие onchange к более или менее.то же самое.

Бест,

Answer 3

вот вам пример http://jsfiddle.net/rtXLe/

<select>
    <option value="#divA">a</option>
    <option value="#divB">b</option>
</select>

<div id="divA" class="brandDiv">brand A</div>
<div id="divB" class="brandDiv">brand B</div>

<script type="text/javascript">
    $(function() {
        $("select").change(function() {
            // hide all brands first
            $("div.brandDiv").hide();
            // val is something like #div1 or #div2
            var targetId = $(this).val();
            // show the new selected one
            $(targetId).show();
        });
    });         
</script>

Answer 4

Методы jQuery .change(), .show() и .hide() помогут вам далеко продвинуться. Вы должны использовать .change() для регистрации обработчика события change input и два других для выполнения манипулирования стилем в этом обработчике.

Answer 5

Событие jQuery.change поможет вам создать обработчик на основе поля выбора или группы переключателей, которые были «изменены». Оттуда вы можете показать необходимый div.

Дополнительную документацию можно найти здесь: http://api.jquery.com/change/