скрыть/показать параметр при выборе с помощью меню выбора пользовательского интерфейса jQuery

Я использую плагин jquery selectmenu для отображения красивого меню выбора стиля. У меня есть три меню выбора, все параметры скрыты в последних двух меню, когда вы выбираете параметр из первого меню, он показывает соответствующие параметры во втором меню. То же самое происходит и для меню два-три. Без плагина selectmenu все работает нормально. К сожалению, с плагином меню выбора он исчезает и больше не появляется.

ДЕМО http://jsfiddle.net/GXtpC/1525/

$(function(){            
    $('select').selectmenu({
        style:'popup'
    });

    $('.select1').on('change', function () {
        var parentId = $(this).children(":selected").attr("id");
        $('.all-opt').hide();
        $('.' + parentId).show();
    });
    $('.select2').on('change', function () {
        var parentIdReg = $(this).children(":selected").attr("data-id");
        $('.select3-option').hide();
        $('.' + parentIdReg).show();
    });

});

Полностью работает без плагина jQuery selectmenu

ДЕМО http://jsfiddle.net/GXtpC/1526/


javascript jquery jquery-ui select-menu jquery-ui-selectmenu
person Community    schedule 27.01.2015    source источник
comment
Это происходит потому, что виджет selectmenu заменяет большую часть вашего html (включая атрибуты id и data-id). Это ожидаемое поведение. Как вы пытались обойти это и какие у вас проблемы с этим? (примечание: style недопустимый вариант)   -  person blgt    schedule 27.01.2015
comment
Вы можете найти новый добавленный элемент, когда он имеет идентификатор. Например, если у вас есть $('#myspecialselect').selectmenu();, новый элемент будет $("#myspecialselect-menu").   -  person Fanky    schedule 18.01.2017

Ответы (3)


arrow_upward
0
arrow_downward

Я не знаком с виджетом selectmenu(), но могу указать на некоторые моменты, на которые стоит обратить внимание. Немного изменив код, кажется, что после вызова selectmenu() вызов hide() становится невозможным:

$(function(){            
    $('.select1').selectmenu();
    $('.select3').selectmenu();

    $('.select2').hide();    <---- hidden
    $('.select3').hide();    <---- not hidden
/*
    $('.select1').on('change', function () {
       ...
       ...
    */
});

Также небольшая опечатка в форме вызвала

SELECT OPTION 1
SELECT OPTION 1
SELECT OPTION 3

Я полагаю, это должно быть 1,2 и 3?

person Lars Andren    schedule 27.01.2015
comment
Это происходит из-за того, что selectmenu заменяет элемент select элементом div и стирает class в процессе; дело не в hide(), а в том, что селектор ничего не соответствует - person blgt; 27.01.2015
comment
Я все еще пытаюсь найти решение. - person ; 27.01.2015

arrow_upward
0
arrow_downward

У меня была аналогичная проблема, которую я решил, позвонив

$( "#original_select_id" ).selectmenu( "refresh" );

У меня был код, который удалял или добавлял параметры выбора на основе выбора другого выбора. У IE есть проблемы с методом отображения/скрытия для выбора параметров, поэтому вместо этого я использую метод удаления/добавления (возможно, это необходимо для предоставленного кода для решения этой проблемы).

Когда этот код выполняется после внесения изменений в исходный элемент выбора, меню выбора пользовательского интерфейса jQuery «повторно инициализируется» и содержит только параметры, которые были добавлены/не удалены на лету.

person Lukas    schedule 26.01.2016

arrow_upward
0
arrow_downward

Используйте следующий код:

// init
var mySelect = $( "#my-select" ).selectmenu();

// hide
mySelect.selectmenu('close');
mySelect.widget().hide();

// show
mySelect.widget().show();
person fnagel    schedule 27.01.2015