Отключить опцию select element, основанную на классе

Question

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

Так что мне интересно, как я могу использовать disable для следующего вопроса, который у меня есть.

Этот пример упрощен, фактический код содержит петли PHP и MySQL для отображения параметров и содержимого.

Хорошо, так, прежде всего, у меня есть эти два выбора элементов:

<select class="form-control select-box"> 
    <option value="make-any">Make (Any)</option> 
    <option value="BMW">BMW</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Volvo">Volvo</option> 
</select> 

<select class="form-control select-box-model"> 
    <option value="make-any">Make (Any)</option> 
    <option value="C220">C220</option> 
    <option value="X1">X1</option> 
    <option value="X5">X5</option> 
    <option value="XC90">XC90</option> 
</select> 

Я тогда этот список:

<div class="makes BMW X1"> 
<ul> 
    <li>BMW</li> 
    <li>X1</li> 
</ul> 
</div> 

<div class="makes VOLVO XC90"> 
<ul> 
    <li>VOLVO</li> 
    <li>XC90</li> 
</ul> 
</div> 

<div class="makes MERCEDES C220"> 
<ul> 
    <li>MERCEDES</li> 
    <li>C220</li> 
</ul> 
</div> 

<div class="makes BMW X5"> 
<ul> 
    <li>BMW</li> 
    <li>X1</li> 
</ul> 
</div> 

я в настоящее время с помощью этого JQuery, чтобы скрыть DIV с классом «делает», если выбранная опция не соответствует классу div, например, «БМВ»:

<script> 
    $(document).ready(function(){ 
    $('.form-control').change(function(){ 
    var make = $(this).val(); 
    if(make != 'make-any'){ 
     $('.makes').hide(); 
     $('.'+make).show(); 
     } else { 
     $('.makes').show(); 
     } 
    }); 
    });</script> 

Таким образом, s вы можете видеть, что у меня есть небольшая проблема, потому что второй элемент select с классом «select-box-model» содержит все модели, я бы хотел отключить параметры, которые не связаны с первым выбором элемент, который был выбран.

Например, список контейнеры содержат классы для «Make» и «Модели» от каждого транспортного средства:

<div class="makes BMW X5"> 

Так как я могу отключить параметры, которые не связаны с этим «Make», например, если пользователь выбирает BMW для первого элемента, мне бы понравились только «Модели», связанные с «Make».

Любые примеры были бы замечательными, спасибо.

Answer 1

Ну, я не совсем уверен, что понял ваш вопрос.

Но я предполагаю, что вы имеете в виду, что если вы выберете марку автомобиля с выбором (form control), доступные модели должны быть включены в выборе двух select-box-model. После выбора модели необходимо отобразить точный div?

Если это то, что вы пытаетесь сделать, разметка - не лучшая структура для достижения этой цели.

Тем не менее, я сделал пример, используя свой след до:

JQuery:

$('.select-box-model').prop('disabled',true); 
$('.form-control').on('change',function(){ 
    $('.select-box-model').prop('disabled',false); 
    if($(this).val() != 'make-any'){ 
    $('.makes').hide();   

    //check if the models drop down is used 
    if($(this).hasClass('select-box-model')){ 
     //get selected value 
     var value = $(this).val(); 
     $('.'+ value).show(); 
     return false; 
     } 

    //get selected value 
    var carBrand = $(this).val(); 
    $('.select-box-model option').prop('disabled',true); 
    $('.'+ carBrand).find('li').each(function(){ 

    if($.trim(carBrand) != $.trim($(this).text())){ 
     $('.select-box-model option[value="'+ $(this).text() +'"]').attr("disabled", false); 
     } 
    }); 
    } 
}); 

Вот скрипка этого: http://jsfiddle.net/z59v56ec/

аккуратнее решения для достижения этого с помощью Ajax для заполнения моделей марки автомобилей.

Но если вы действительно хотите сделать это по-своему, то следующая логика будет проще.

• Выберите один имеет значение марки автомобиля
• Выберите два имеет значение марки автомобиля и текст является моделью
• Выберите один позволят опции в выбрать два со значением этой марки автомобиля
• При выборе модели в выборе двух точные divs будут показаны в соответствии с текстом опции.

На боковой панели, будьте осторожны с вашими рекомендациями. VOLVO - это не то же самое, что Volvo.

На всякий случай я полностью пропустил точку - извините! :)

Answer 2

Во-первых, вам гораздо лучше создать несколько выборок и переключить их отображение на основе выбранного вами выбранного значения select. Затем вы создаете несколько разделов и переключаете их отображение на основании выбранного вами второго значения select. Тем не менее, если вы действительно хотите, чтобы атаковать это «динамически», вы лучше иметь два выбирает - и один неупорядоченный список - и очистка их содержимого и переписывание HTML, как вы идете:

<select class="form-control select-box" id="selectMake"> 
    <option value="make-any">Make (Any)</option> 
    <option value="BMW">BMW</option> 
    <option value="Mercedes">Mercedes</option> 
    <option value="Volvo">Volvo</option> 
</select> 

<select class="form-control select-box-model" id="selectModel"> 
</select> 

<ul id="ulCars"> 
</ul> 

$("#selectMake").change(function(){ 
    $("#selectModel").empty(); 
    $("#ulCars").empty(); 

    switch ($(this).val()){ 
     case "BMW": 
      $("#selectModel").append("<option>X1</option>").val("X1"); 
      $("#ulCars").append("<li>X1</li>"); 
     break; 
    } 
}); 

и т.д. и т.п. ., но вы можете легко очистить списки и выпадающие списки - и затем повторно их заполнить. Но, как я уже сказал, я бы пошел с несколькими div и переключил их дисплей.