Зависимый выбор с помощью Chosen Jquery

0

Я просто хочу сделать что-то очень простое, это выбор, в зависимости от выбранного параметра, он заполняет второй выбор.

Я всегда делал это, скрывая/показывая выбранные таким образом (JS):

$( document ).ready(function() {    
$("#select_1").change(function() {
        if ($("#select_1").val()=="A") {
        $("#select_2").show();
        $("#select_3").hide(); 
    }

    else if ($("#select_1").val()=="B") {
        $("#select_3").show();
        $("#select_2").hide();
    };
});

Но теперь я пытаюсь выбрать и не работает. Он удаляет всю выбранную маску и возвращает выбранные значения в native. Я также пробовал это (JS):

$(document).ready(function(e) {
  $("#select_2").css('visibility','hidden');
  $(".chosen").chosen();
  $("#select_1").click(function() {
   if ($("#select_1").val()=="A") {
   $("#select_2").css('visibility','visible');

   }

И это тоже не работает. Он не удаляет Chosen, но ничего не делает. Есть идеи по этому поводу? Я знаю, что это звучит довольно основательно, я не мог найти точного ответа на него в любом месте.

PS: Я пытаюсь сделать это с JS, а не через AJAX.

  • 0
    Есть ли плагин, который вы используете для функции selected ()? Если да, правильно ли вы включаете его?
Теги:
jquery-chosen
prototype-chosen

1 ответ

0
Лучший ответ

Я предполагаю, что # select_1 должен использовать выбранный плагин. Если это правильно, # select_1 будет иметь стиль отображения: none; применяется к нему, поэтому вы не собираетесь регистрировать на нем какие-либо события "клика".

Если вы посмотрите на "выбранную" документацию, http://harvesthq.github.io/chosen/, вы можете узнать, как зарегистрировать обработчик изменений в выбранном вами элементе.

Если выбранный применяется к # select_2 и # select_3, то переключение видимости этих двух элементов бессмысленно, поскольку они уже скрыты. HTML, отображаемый выбранным плагином, будет иметь элементы контейнера с идентификаторами # select_2_chosen и # select_3_chosen - поэтому переключите их видимость!

В приведенном ниже коде предполагается, что # select_2 и # select_3 имеют класс 'selected'. Я применяю выбранное значение к # select_1 отдельно, чтобы я мог привязать событие изменения, которое должно быть уникальным для него. Наконец, я запускаю событие изменения сразу после определения обработчика изменений, так что # select_3_chosen станет скрытым.

$(".chosen").chosen();
$("#select_1").chosen().change(function () {
    var value = $(this).val();
    if (value=="A") {
        $("#select_2_chosen").css('visibility','visible');
        $("#select_3_chosen").css('visibility','hidden');
    } else if (value == "B") {
        $("#select_2_chosen").css('visibility','hidden');
        $("#select_3_chosen").css('visibility','visible');
    } 
}).trigger('change');
  • 0
    Спасибо, это сработало. Однако не с .css («видимость», «скрытый»), а с .hide ()

Ещё вопросы

Сообщество Overcoder
Наверх
Меню