Показать или вернуть выбранные параметры на множественный выбор с помощью jquery

0

Ребята Я создаю код, который удалит выбранную опцию в другом выпадающем списке, который был выбран, я использовал jQuery (jquery-1.10.1.min), но я не знаю, как я смогу вернуть выбранный вариант или номер как только пользователь передумает.

Не могли бы вы мне помочь? Заранее спасибо.

Вот мой сценарий:

HTML

<select name="question_order[]" id="question_order1">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order2">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order3">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order4">
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

Javascript

$(window).load(function(){
$('#question_order1').on('change', function() {
   var val=this.value; 
   $("#question_order2").find("option:contains("+val+")").remove();     
   $("#question_order3").find("option:contains("+val+")").remove();
   $("#question_order4").find("option:contains("+val+")").remove();

 });

$('#question_order2').on('change', function() {
  var val=this.value;
   $("#question_order1").find("option:contains("+val+")").remove();
   $("#question_order3").find("option:contains("+val+")").remove();
   $("#question_order4").find("option:contains("+val+")").remove();

});

$('#question_order3').on('change', function() {
  var val=this.value;
   $("#question_order1").find("option:contains("+val+")").remove();
   $("#question_order2").find("option:contains("+val+")").remove();     
   $("#question_order4").find("option:contains("+val+")").remove();   
});


$('#question_order4').on('change', function() {
  var val=this.value;
   $("#question_order1").find("option:contains("+val+")").remove();
   $("#question_order2").find("option:contains("+val+")").remove();     
   $("#question_order3").find("option:contains("+val+")").remove();   
});


});//]]>
  • 0
    вместо их удаления используйте display:none чтобы скрыть их от пользователя и иметь кнопку обновления для display:block все скрытые элементы.
  • 0
    Кнопка обновления будет проблемой, так как они хотят показать данные сразу. Можно ли показать значение без обновления?
Показать ещё 3 комментария
Теги:
select
option
multiple-instances

2 ответа

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

Вот решение, в котором сначала хранится копия <option> html. При изменении <selecct> он создает массив всех выбранных значений. Затем он восстанавливает все остальные из сохраненного html и фильтрует допустимые значения.

$(function () {
    var $quest = $('.question_order');
    /* cache option html */
    var optHtml = $quest.first().html();

    $quest.on('change', function () {
        /* make array of all selected values*/
        var selecteds=$quest.find('option:selected').map(function(){
            if(this.value){
               return this.value 
            }
        }).get();
        /* rebuild the other select elements*/
        $quest.not(this).each(function(){
            var selVal=this.value || '';
            /* create new set of options with filtered values*/ 
            var $opts=$(optHtml).filter(function(){
                return $.inArray(this.value,selecteds) ==-1 ||  this.value ==selVal
            });
            /* replace children*/
           $(this).html($opts).val(selVal);

        });
    });

});

Обратите внимание, что class="question_order" добавлен к каждому элементу.

DEMO

Поделиться
  • 0
    Большое спасибо..
0

Попробуй это

<select name="question_order[]" id="question_order1" >
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order2" >
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order3" >
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

<select name="question_order[]" id="question_order4" >
<option value="">None</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
</select>

демонстрация

Поделиться
  • 0
    Спасибо за помощь, но она не работает, проблема в том, что пользователь выбирает вариант 1 при первом выборе, затем вариант 2 при втором выборе и вариант 3 при третьем выборе, но они вдруг передумали и выбрали 1 на втором выберите и 2 на первом выборе, моя проблема заключается в том, что мне нужно показать оставшийся выбор на третьем выборе, если они меняют первый выбор на 3.

Ещё вопросы

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