Prevenir selecciones múltiples del mismo valor

Question

Estoy trabajando en un proyecto en el que tengo un formulario que tendrá múltiples entradas 'seleccionar', todas con el mismo conjunto de opciones. Me gustaría usar jquery para deshabilitar/ocultar una opción en el resto de las entradas 'seleccionar', si ya se ha seleccionado.

Por ejemplo:

<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> 

El usuario elige 'Volvo' en la primera selección. Me gustaría eliminarlo de la segunda selección.

Cualquier información sería muy apreciada.

Answer 1

continuacion código para continuar seleccionando y deshabilitando todas las veces que queramos.

Lo primero es habilitar cada opción, y luego mirar los valores seleccionados, y deshabilitar las opciones que coinciden con los valores seleccionados.

Estos 2 pasos son cruciales porque si selecciona de nuevo, los valores desactivados de antes continuarían deshabilitados.

NUEVA VERSIÓN

La forma más elegante, donde utilizamos un mapa() (in stackoverflow there is a good explanation about this method) y las funciones de jQuery filtro() para hacer el trabajo. Menos líneas, y creo que el mismo rendimiento o mejor.

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"); 

}); 

NUEVA VERSIÓN

He editado mi respuesta, esta es mi versión final:

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"); 

} 

OLD VERSION

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"); 

} 

Answer 2

Para ocultar ellos, utilizar el siguiente enfoque (desde IE error impide el uso de CSS propiedad "pantalla" a "ninguno" en una opción):

-Store la lista original de opciones en una matriz

-Tener una función para construir el selecto #x de una matriz, deslizándose previamente seleccionado artículos

-Asignar un controlador onchange para todas selecciona qué recorre todos selecciona posteriores y llama a esta función.

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); 
    } 
} 

Y a continuación, el código 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> 

Answer 3

que podría hacer algo como

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

(por supuesto se puede utilizar directamente $(this) si va a añadir el cambio en las opciones de sí mismo a través el controlador change)

Por supuesto que esto no funcionará al revés :)

En ese caso, le sugiero que para construir sus opciones directamente con JavaScript para que tenga el programa completo de la que eliminar los elementos cuando sea necesario, antes de la sustitución hacia distintas select

Answer 4

es un ejemplo de trabajo aquí:

http://jsfiddle.net/aNxBy/

con sus datos, usted tiene que hacer esto:

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

Tenga en cuenta, sin embargo, que esto no hará que deshabilite la desactivación después de haberla cambiado a otro valor. No agregué esto aquí porque no especificó exactamente lo que necesitaba hacer después de deshabilitó la opción ... realmente podría ser una serie de escenarios posibles.

Una cosa que podría hacer es recorrer todos los elementos relevantes select cuando se dispare el evento de cambio, encontrar los valores de todas las opciones seleccionadas y deshabilitarlas cuando corresponda.

Answer 5

Eche un vistazo a this.Es:

1. obtiene el ID de la lista desplegable que acaba de cambiar
2. bucles a través de todas las listas de selección
3. eliminar el elemento que acaba de seleccionar de todas las otras listas

Answer 6

$(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'); 
    }); 
});

Asegúrate de que tienes en css

.hidden {display:none}

Answer 7

Esta cuestión fue el resultado google superior para la búsqueda de una respuesta a esta, por lo Publicaré una respuesta actualizada aquí. Esto es casi exactamente lo mismo que la respuesta de Netadictos, pero funciona para deshabilitar y reactivar los valores de selección y usa prop en lugar de attr. Trabajo verificado en 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.