ограничить дочерний множественный выбор на основе множественного выбора родительского с JQuery - PullRequest
Новая
       13

ограничить дочерний множественный выбор на основе множественного выбора родительского с JQuery

0 голосов
/ 20 октября 2010

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

Возьмем, к примеру:

  • Когда выбран родитель 1, все элементы статуса для родителя 1 должны быть разрешены для выбора
  • Когда выбран родитель 1 и родитель 2, все элементы статуса, которые разрешены в обоих родительских 1и 2 должно быть разрешено для выбора в дочернем элементе

После поиска здесь и выполнения большого количества поиска в Google, я думаю, я подошел близко, но это решение, к сожалению, не полностью удовлетворяет второму требованию.

Возможно, я подхожу к этому совершенно неверно, поэтому я открыт для предложений.

JS: 

$(document).ready(function(){

var allOptions = $('#children option').clone();

function children_update() {
    $('#parents > option:selected').each(function() { 
        $('#children').html(allOptions.filter('.option-' + parseInt($(this).val())));    
    });
    if(!$('#parents > option:selected').length) { $('#children').html(allOptions); }
}

children_update();

$('#parents').change(function() { children_update(); });
});

HTML 

    Parents<br />
<select multiple name="parents[]" id="parents">
<option value="1">parent 1</option>
<option value="2">parent 2</option>
<option value="3">parent 3</option>
</select>

<br />
Children<br />
<select multiple name="children[]" id="children">
<option value="1" class="option-1">child 1 (1)</option>
<option value="2" class="option-1 option-2">child 2 (1,2)</option>
<option value="3" class="option-1 option-2 option-3">child 3 (1,2,3)</option>
<option value="4" class="option-1 option-2">child 4 (1,2)</option>
<option value="5" class="option-2">child 5 (2)</option>
<option value="6" class="option-3">child 6 (3)</option>
</select>

Спасибо

1 Ответ

0 голосов
/ 20 октября 2010

Как насчет изменения функции children_update на эту ... 

function children_update() {
    $("#children option").attr('disabled','true');   //start off with all disabled
    $('#parents > option:selected').each(function() {
        var num = $(this).val();
        $("#children .option-"+num).attr('disabled','false');
    });
    if(!$('#parents > option:selected').length){           //if no parents selected
        $("#children option").attr('disabled','false');    //enable all options
    }
}

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

РЕДАКТИРОВАТЬ:

Хорошо, вот новое решение: 

function children_update() {
    $("#children option").attr('disabled','true');   //start off with all disabled
    var selectors = getSelectors();
    $("#children option"+selectors).attr('disabled','false');
}

function getSelectors(){
    var parents = $("#parents").val();
    var selectors = "";
    if (parents){
        $.each(parents, function(index, val){
            selectors = selectors + ".option-" + val;
        });
    }
    return selectors;
}
...