Предотвратить множественный выбор одинаковой ценности - PullRequest
5 голосов
/ 23 октября 2010

Я работаю над проектом, в котором у меня есть форма, которая будет иметь несколько входов «выбор», все с одинаковым набором опций. Я хотел бы использовать jquery, чтобы отключить / скрыть параметр в остальных входных данных «select», если он уже был выбран.

Например:

<select id="1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

<select id="2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>

Пользователь выбирает «Volvo» при первом выборе. Я хотел бы, чтобы он был удален из второго выбора.

Любая информация будет принята с благодарностью.

Ответы [ 7 ]

5 голосов
/ 23 октября 2010

Здесь есть код для продолжения выбора и отключения в любое время.

Прежде всего включите каждый параметр, а затем посмотрите на выбранные значения и отключите параметры, совпадающие с выбранными значениями.

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

НОВЕЙШАЯ ВЕРСИЯ

Более элегантный способ, в котором мы используем map () ( в stackoverflow, есть хорошее объяснение этого метода ) и функций filter () jquery для выполнения этой работы. Меньше строк, и я думаю, что та же производительность или лучше.

http://www.jsfiddle.net/dactivo/keDDr/

$("select").change(function()
 {

        $("select option").attr("disabled",""); //enable everything

     //collect the values from selected;
     var  arr = $.map
     (
        $("select option:selected"), function(n)
         {
              return n.value;
          }
      );

    //disable elements
    $("select option").filter(function()
    {

        return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
     }).attr("disabled","disabled");   

});

НОВАЯ ВЕРСИЯ

Я отредактировал свой ответ, это моя окончательная версия:

http://www.jsfiddle.net/dactivo/kNbWc/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{
    var arr=[];
      $("select option:selected").each(function()
              {
                  arr.push($(this).val());
              });

    $("select option").filter(function()
        {

              return $.inArray($(this).val(),arr)>-1;
   }).attr("disabled","disabled");   

}

Старая версия

http://www.jsfiddle.net/AyxL3/

$("select").change(function()
                   {

        $("select option").attr("disabled",""); //enable everything
        DisableOptions(); //disable selected values

                   });


function DisableOptions()
{

    $("select option").filter(function()
        {
              var bSuccess=false; //will be our flag to know it coincides with selected value
              var selectedEl=$(this);
              $("select option:selected").each(function()
              {

                  if($(this).val()==selectedEl.val())
                  {
                       bSuccess=true; //it coincides we will return true;
                       return false; // this serves to break the each loop
                   }               

              });
              return bSuccess;
   }).attr("disabled","disabled");   

}
3 голосов
/ 23 октября 2010

Чтобы скрыть их, используйте следующий подход (поскольку ошибка IE не позволяет использовать для свойства CSS «display» значение «none» в OPTION):

-Сохранить исходный список опций в массиве

-Имеет функцию для создания select #x из массива, перемещая ранее выбранные элементы

-Назначить обработчик onchange для всех выборок, который перебирает все последующие выборки и вызывает эту функцию.

var option_value_order = {'volvo', 'saab', 'mercedes'};
var option_display_strings = new Array();
option_display_strings['volvo'] = 'Volvo'; 
//...

// Assume each of the selects' ID value is "select_1", "select_2" instead of "1", "2"
function redraw(selectNum) {
    var selectId = "select_" + selectNum;
    var s = document.getElementById(selectId);
    s.options.length = 0; // empty out
    var next = 0;
    for (var i = 0; i < option_value_order.length; i++) { 
        var skip = 0;
        for (var select_index = 0; select_index < selectNum; select_index++) {
            if (document.getElementById("select_"+select_index).selected == i)
                skip = 1;
            if (skip == 0) {
                var o = option_value_order[i];
                s.options[next] = o;
                // Don't recall how to set value different from option display, 
                // using option_display_strings[o] 
                next++;
            }
        }
    }
}

var total_selects = 2;

function change_later_selects(s) {
    var select_num = find_number(s.id); "this returns number 2 for "select_2" - homework
    for (var i = select_num + 1; i <= total_selects; i++) {
        redraw(i);
    }
}

А потом HTML

<select id="select_2" onchange="change_later_selects(this);">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
</select>
2 голосов
/ 13 августа 2016

Этот вопрос был лучшим результатом поиска Google для поиска ответа на этот вопрос, поэтому я выложу обновленный ответ здесь.Это почти то же самое, что и ответ netadictos, но работает для отключения и повторного включения выбранных значений и использует prop вместо attr.Проверено работает в Chrome 52.

    $("select").change(function()
    {
        $("select option").prop("disabled",""); //enable everything

        //collect the values from selected;
        var  arr = $.map
        (
            $("select option:selected"), function(n)
            {
                return n.value;
            }
        );

        //disable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)>-1; //if value is in the array of selected values
        }).prop("disabled","disabled");

        //re-enable elements
        $("select option").filter(function()
        {
            return $.inArray($(this).val(),arr)==-1; //if value is not in the array of selected values
        }).prop("disabled","");
    }).trigger("change"); // Trigger the change function on page load. Useful if select values are pre-selected.
2 голосов
/ 23 октября 2010

Вот рабочий пример:

http://jsfiddle.net/aNxBy/

С вашими данными, вы должны сделать это:

$(document).ready(function() {
    $('select').change(function() {
        $('option[value=' + $(this).val() + ']').attr('disabled', 'disabled');
    });
});

Однако помните о фактечто не отключит отключение после того, как вы изменили его на другое значение.Я не добавил это здесь, потому что вы не указали, что именно нужно сделать после вы отключили эту опцию ... на самом деле это может быть несколько возможных сценариев.

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

1 голос
/ 23 октября 2010
$(document).ready(function() {
    $('#1').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#2 option[value=' + $(this).val() + ']').addClass('hidden');
    });
    $('#2').change(function() {
        $('option.hidden').removeClass('hidden')
        $('#1 option[value=' + $(this).val() + ']').addClass('hidden');
    });
});

Убедитесь, что у вас есть в css

.hidden {display:none}

1 голос
/ 23 октября 2010

Взгляните на это .Он:

  1. получает идентификатор выпадающего списка, который вы только что изменили
  2. перебирает все выбранные списки
  3. удаляет выбранный вами элемент из всех остальных списков
1 голос
/ 23 октября 2010

вы могли бы сделать что-то вроде

var curSelected = $('#1 option:selected').val();
$('#2 option[value="'+curSelected+'"]').remove()

(конечно, вы можете напрямую использовать $(this), если планируете добавить изменение к самим опциям через обработчик change)

Конечно, это не сработает в обратном направлении:)

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...