JQuery показать/скрыть параметры из одного выпадающего списка, когда выбрана опция в другом выпадающем меню выбора

Ответ 1

Попробуйте -

$("#column_select").change(function () {
    $("#layout_select").children('option').hide();
    $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
})  

Если вы собираетесь использовать это решение, вам нужно будет скрыть все элементы, кроме тех, которые имеют значение "none" в вашей функции document.ready -

$(document).ready(function() {
    $("#layout_select").children('option:gt(0)').hide();
    $("#column_select").change(function() {
        $("#layout_select").children('option').hide();
        $("#layout_select").children("option[value^=" + $(this).val() + "]").show()
    })
})

Демо - http://jsfiddle.net/Mxkfr/2

ИЗМЕНИТЬ

Возможно, я немного увлекся этим, но вот еще один пример, в котором используется кеш исходных параметров списка выбора, чтобы гарантировать, что список 'layout_select' полностью reset/очищен (включая 'none' ) после изменения списка "column_select" -

$(document).ready(function() {
    var optarray = $("#layout_select").children('option').map(function() {
        return {
            "value": this.value,
            "option": "<option value='" + this.value + "'>" + this.text + "</option>"
        }
    })

    $("#column_select").change(function() {
        $("#layout_select").children('option').remove();
        var addoptarr = [];
        for (i = 0; i < optarray.length; i++) {
            if (optarray[i].value.indexOf($(this).val()) > -1) {
                addoptarr.push(optarray[i].option);
            }
        }
        $("#layout_select").html(addoptarr.join(''))
    }).change();
})

Демо - http://jsfiddle.net/N7Xpb/1/

Ответ 2

Как насчет:

(Обновленный)

$("#column_select").change(function () {
    $("#layout_select")
        .find("option")
        .show()
        .not("option[value*='" + this.value + "']").hide();

    $("#layout_select").val(
        $("#layout_select").find("option:visible:first").val());

}).change();

(если третий option должен иметь значение col3)

Пример: http://jsfiddle.net/cL2tt/

Примечания:

• Используйте .change() событие, чтобы определить обработчик событий, который выполняется при изменении значения select#column_select.
• .show() all option во втором select.
• .hide() all option во втором select, чей value не содержит value выбранного параметра в select#column_select, используя атрибут содержит селектор.

Ответ 3

Инициализация обоих выпадающих списков одинакова, опция, которую вы выбираете в firstdropdown, скрыта во втором обращении. "value" - это настраиваемый атрибут, который уникален.

$(".seconddropdown option" ).each(function() {
    if(($(this).attr('value')==$(".firstdropdown  option:selected").attr('value') )){
        $(this).hide();
        $(this).siblings().show();
    }
});

Ответ 4

Возможно, поздно, но я бы предложил

$(document).ready(function() {
    var layout_select_html = $('#layout_select').html(); //save original dropdown list

    $("#column_select").change(function () {
        var cur_column_val = $(this).val(); //save the selected value of the first dropdown
        $('#layout_select').html(layout_select_html); //set original dropdown list back
        $('#layout_select').children('option').each(function(){ //loop through options
        if($(this).val().indexOf(cur_column_val)== -1){ //do your conditional and if it should not be in the dropdown list
           $(this).remove(); //remove option from list
        }
    });
});

Ответ 5

// find the first select and bind a click handler
$('#column_select').bind('click', function(){
    // retrieve the selected value
    var value = $(this).val(),
        // build a regular expression that does a head-match
        expression = new RegExp('^' + value),
        // find the second select
        $select = $('#layout_select);

    // hide all children (<option>s) of the second select,
    // check each element value agains the regular expression built from the first select value
    // show elements that match the expression
    $select.children().hide().filter(function(){
      return !!$(this).val().match(expression);
    }).show();
});

(это далеко не идеально, но должно быть там)...

Ответ 6

И в 2016 году..... я делаю это (что работает во всех браузерах и не создает "незаконный" html).

Для раскрывающегося списка, который должен показывать/скрывать разные значения, добавьте это значение в качестве атрибута данных.

<select id="animal">
    <option value="1" selected="selected">Dog</option>
    <option value="2">Cat</option>
</select>
<select id="name">
    <option value=""></option>
    <option value="1" data-attribute="1">Rover</option>
    <option value="2" selected="selected" data-attribute="1">Lassie</option>
    <option value="3" data-attribute="1">Spot</option>
    <option value="4" data-attribute="2">Tiger</option>
    <option value="5" data-attribute="2">Fluffy</option>
</select>

Затем в вашем jQuery добавьте событие изменения в первый раскрывающийся список, чтобы отфильтровать второй раскрывающийся список.

$("#animal").change( function() {
    filterSelectOptions($("#name"), "data-attribute", $(this).val());
});

И волшебная часть - это небольшая утилита jQuery.

function filterSelectOptions(selectElement, attributeName, attributeValue) {
if (selectElement.data("currentFilter") != attributeValue) {
    selectElement.data("currentFilter", attributeValue);
    var originalHTML = selectElement.data("originalHTML");
    if (originalHTML)
        selectElement.html(originalHTML)
    else {
        var clone = selectElement.clone();
        clone.children("option[selected]").removeAttr("selected");
        selectElement.data("originalHTML", clone.html());
    }
    if (attributeValue) {
        selectElement.children("option:not([" + attributeName + "='" + attributeValue + "'],:not([" + attributeName + "]))").remove();
    }
}

}

Этот маленький жемчуг отслеживает текущий фильтр, если он по-разному восстанавливает исходный выбор (все элементы), а затем удаляет отфильтрованные элементы. Если элемент фильтра пуст, мы видим все элементы.