Quiero prevenir un cuadro de selección de ser cambiado si una determinada condición se aplica. Haciendo esto no parece funcionar:

$('#my_select').bind('change', function(ev) {
  if(my_condition)
  {
    ev.preventDefault();
    return false;
  }
});

Supongo que esto es debido a que en este punto la opción seleccionada ya ha cambiado.

¿Cuáles son otras maneras de hacer esto?

InformationsquelleAutor overgroove | 2011-03-24

12 Comentarios

  1. 47

    Intente esto:

    http://jsfiddle.net/qk2Pc/

    var my_condition = true;
    var lastSel = $("#my_select option:selected");
    
    $("#my_select").change(function(){
      if(my_condition)
      {
        lastSel.prop("selected", true);
      }
    });
    
    $("#my_select").click(function(){
        lastSel = $("#my_select option:selected");
    });
    • Esto es lo que yo estaba buscando. En lugar de utilizar el lastSel cierre yo simplemente le asigna un «last_selected» de la clase a la última opción seleccionada y luego miró por esa opción y haya asignado. Gracias!
    • Esta solución no está funcionando en JQuery 3.1.1 y arriba. De otra manera?
  2. 30

    En el caso de que alguien necesita una versión genérica de mattsven la respuesta (como hice yo), aquí está:

    $('select').each(function() {
        $(this).data('lastSelected', $(this).find('option:selected'));
    });
    
    $('select').change(function() {
        if(my_condition) {
            $(this).data('lastSelected').attr('selected', true);
        }
    });
    
    $('select').click(function() {
        $(this).data('lastSelected', $(this).find('option:selected'));
    });
    • Esto es genial, pero usted no tiene el primer lugar de cada. Haga clic en evento de tener la misma antes de cambiar cada vez.
    • Gran genérico respuesta! Un momento – ¿qué pasa si las fichas de usuario y utiliza un teclado para seleccionar? Así que mejor usar el enfoque en lugar de hacer clic en el tercer bloque. Y estoy de acuerdo con David.
    • He editado para cambiar haga clic para enfoque para hacer que el teclado amigable (ver: jsfiddle.net/VTUnK ) , pero, afortunadamente, la edición fue rechazado como acabo de encontrar un bug… El enfoque desencadena incluso si se nos abrirá un cuadro de diálogo y cerrar así que si queremos restaurar la selección después de eso, no va a funcionar. Así que si queremos hacer de teclado amigable, tenemos que utilizar el código de arriba, y también el mapa a keydown así.
    • buen trabajo; he añadido un par de mejoras así: jsfiddle.net/VTUnK/7 Ahora usted puede cancelar otros eventos adjuntos para que seleccione;mattsven dwallace – esta respuesta debe ser actualizado con msanjay (o mi) actualizaciones
    • Buen trabajo, pero tengo que desmarcar el nuevo valor con: $(this).find('option:selected').attr('selected', false); antes de $(this).data('lastSelected').attr('selected', true);
    • trate de usar prop en lugar de attr

  3. 9

    Si desea simplemente para evitar la interacción con la seleccione por completo cuando my_condition es cierto, que siempre se puede simplemente captura el evento mousedown y hacer de su evento de evitar que haya:

    var my_condition = true;
    
    $("#my_select").mousedown(function(e){
      if(my_condition)
      {
         e.preventDefault();
         alert("Because my_condition is true, you cannot make this change.");
      }
    });

    Esto evitará cualquier evento de cambio cada vez que ocurre mientras my_condition es cierto.

    • Incluso si el usuario pulsa los botones up o down para cambiar la selección, cuando la entrada tiene el foco?
    • Usted puede ser capaz de utilizar tabindex=-1 O usted podría agregar jQuery que detecta el foco y se dispara en el siguiente elemento
  4. 2

    Otra opción a considerar es la inhabilitación cuando usted no quiere que sea capaz de ser cambiado y lo que le:

    //When select should be disabled:
    {
        $('#my_select').attr('disabled', 'disabled');
    }
    
    //When select should not be disabled
    {
        $('#my_select').removeAttr('disabled');
    }

    Actualización ya que su comentario (si entiendo la funcionalidad que usted desea):

    $("#dropdown").change(function()
    {
        var answer = confirm("Are you sure you want to change your selection?")
        {
            if(answer)
            {
                //Update dropdown (Perform update logic)
            }
            else
            {
                //Allow Change (Do nothing - allow change)
            } 
        }            
    }); 

    Demo

    • Las necesito para ser capaz de cambiar el seleccionar en todo momento. Cuando se cambie la instrucción select es una dinámica que se puede ordenar la lista de artículos que ha seleccionado no es válido. Tengo que advertirles que ese es el caso antes de que yo claro que lista. Si ellos deciden no tener que lista clara entonces la necesidad de asegurarse de que la seleccione el cambio no sucede.
    • Así que usted desea que el usuario sea capaz de cambiar siempre – sin embargo, cuando cambian a pedir que si quieren que se produzca el cambio – de lo contrario no hacer nada? Algo similar a esto? jsfiddle.net/CHTfp/2
  5. 1

    Ninguna de las respuestas funcionado bien para mí. La solución más fácil, en mi caso fue:

    $("#selectToNotAllow").focus(function(e) {
        $("#someOtherTextfield").focus();
    });

    Esto logra hacer clic o presiona el tabulador para el seleccione el menú desplegable y simplemente mueve el foco a un campo diferente (cerca de un texto de entrada que se establece en el modo de sólo lectura) cuando tratando de concentrarse en la selección. Puede sonar tonto engaño, pero muy eficaz.

  6. 0

    Usted podría necesitar el uso de el «.vivir» opción en jQuery ya que el comportamiento será evaluado en tiempo real basado en la condición que usted ha fijado.

    $('#my_select').live('change', function(ev) {
      if(my_condition)
      {
        ev.preventDefault();
        return false;
      }
    });
    • en vivo vs enlazar no es la respuesta. El vivir función hace que el elemento de su selección no necesariamente tiene que existir cuando se va a asignar el controlador. Detrás de las escenas, creo, que en realidad define un detector en el documento y, a continuación, de forma dinámica se aplica el controlador para el selector.
  7. 0

    Usted puede hacer esto sin jquery…

    <select onchange="event.target.selectedIndex = 0">
    ...
    </select>

    o usted puede hacer una función para comprobar su estado

    <select onchange="check(event)">
    ...
    </select>
    
    <script>
    function check(e){
        if (my_condition){
            event.target.selectedIndex = 0;
        }
    }
    </script>
  8. 0

    Implementar personalizado readonly como eventHandler

    <select id='country' data-changeable=false>
      <option selected value="INDIA">India</option>
      <option value="USA">United States</option>
      <option value="UK">United Kingdom</option>
    </select>
    
    <script>
        var lastSelected = $("#country option:selected");
    
        $("#country").on("change", function() {
           if(!$(this).data(changeable)) {
                lastSelected.attr("selected", true);              
           }        
        });
    
        $("#country").on("click", function() {
           lastSelected = $("#country option:selected");
        });
    </script>

    Demo : https://jsfiddle.net/0mvajuay/8/

    • esto no funciona en mi chrome Versión 54.0.2840.27
    • no es acerca del navegador, pero la versión de jQuery. parece jsfiddle utiliza una versión superior por omisión. Seleccione «Migrar a 1.2.1» y todavía funciona 🙂
  9. 0

    Esta era la ÚNICA cosa que trabajó para mí (en Chrome Versión 54.0.2840.27):

    JS:

    $('select').each(function() {
      $(this).data('lastSelectedIndex', this.selectedIndex);
    });
    $('select').click(function() {
      $(this).data('lastSelectedIndex', this.selectedIndex);
    });
    
    $('select[class*="select-with-confirm"]').change(function() {  
      if (!confirm("Do you really want to change?")) {
        this.selectedIndex = $(this).data('lastSelectedIndex');
      }
    });

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <select id='fruits' class="select-with-confirm">
      <option selected value="apples">Apples</option>
      <option value="bananas">Bananas</option>
      <option value="melons">Melons</option>
    </select>
    
    <select id='people'>
      <option selected value="john">John</option>
      <option value="jack">Jack</option>
      <option value="jane">Jane</option>
    </select>

  10. 0

    Esto funcionó para mí, no hay necesidad de mantener un lastSelected si sabe el optionIndex para seleccionar.

    var optionIndex = ...
    $(this)[0].options[optionIndex].selected = true;
    • Esto no funcionó. No hay errores, sólo lo hizo el comportamiento predeterminado.
  11. 0

    si alguien sigue interesado, ya esta resuelto el problema, usando jQuery 3.3.1

    jQuery('.class').each(function(i,v){
    
        jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());
        jQuery(v).on('change', function(){
    
        if(!confirm('Are you sure?'))
        {
            var self = jQuery(this);
            jQuery(this).find('option').each(function(key, value){
               if(parseInt(jQuery(value).val()) === parseInt(self.data('lastSelected')))
               {
                   jQuery(this).prop('selected', 'selected');
               }
            });
        }
        jQuery(v).data('lastSelected', jQuery(v).find('option:selected').val());    
    });

    });

    • Bienvenido a StackOverflow! Por favor, editar su respuesta para incluir una explicación de su código, y cómo es diferente o mejor que los otros once respuestas. La pregunta original es casi los nueve años de edad, y respuestas sin explicación tienden a obtener votada abajo o eliminado.

Dejar respuesta

Please enter your comment!
Please enter your name here