Pregunta ¿Cómo establezco el valor predeterminado de un menú desplegable después de que se haya cambiado?


Tengo un menú desplegable en la página html, cuando se carga por primera vez, se establece en un valor predeterminado. Pero cuando un usuario cambia el valor, quiero la posibilidad de establecer el menú desplegable en el valor predeterminado original haciendo clic en un botón.

¿Cómo puedo conseguir esto? sin guardar una copia del valor original en un campo oculto ... es como la función de formulario de restablecimiento de javascript ... pero solo quiero que se aplique solo al menú desplegable ...

Gracias


5
2017-07-08 12:26


origen


Respuestas:


teniendo en cuenta que tiene un cuadro de selección simple .. puede usar val() para configurar las opciones ..

<select id="selectId">
<option value="0">Default Value</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<input type="button" id="buttonID" value="change"/>

prueba esto

$('#buttonID').click(function(){
    $('#selectId').val('0'); //value of your default option
});

violín aquí

Sin embargo, si su opción predeterminada es disabled, entonces necesitarías un trabajo para hacer la tarea. un poquito así

$(document).on('click', '#buttonID', function(e) {
    var d = $('#selectId option:disabled').prop('disabled', '');
    $('#selectId').val(0);
    d.prop('disabled', 'disabled');
});

jsFiddle

Tenga en cuenta que puede cambiar el valor de $('#selectId').val(0); para satisfacer sus propias necesidades. Por ejemplo, si la tercera opción es tu valor predeterminado y tiene un valor de 'bob', entonces podrías decir $('#selectId').val('bob');

La respuesta que proporcioné es solo la solución más simple ... @ SpYk3HH la modificó si en el caso de que la opción predeterminada fuera desactivada ... y sí, @Felix Kling ya respondió esta pregunta en una publicación anterior aquí así que échenle un vistazo ... de todos modos, gracias chicos ... :)


Solución usando Atributo a través de jQuery para Cross Compat

Para profundizar en la solución de FelixKling, aquí está la versión completa de jQuery, utilizando .attr que extrae de los atributos originales en lugar de "propiedades modificadas" de .prop.

$(document).on('click', '#buttonID', function(e) {
        $('#selectID option').filter(function(i){ return this.hasAttribute('selected') }).prop('selected', 'selected')
});

Ejemplo jsFiddle


Combo Breaker!

Para solidificar aún más la solución, pruebe un combo de los 2 anteriores. De esta manera, independientemente del diseño HTML, está obligado a restablecer la configuración predeterminada. Lo que quiero decir es que quizás no tenga un cuadro de selección con un conjunto predeterminado, sino que la opción 1 es la predeterminada en la carga. Mientras tanto, otras selecciones tienen un conjunto predeterminado. Lo siguiente resolverá ambos problemas al mismo tiempo.

//    simply a jQuery 1.7+ way of delegating events to any Element match selector
$(document).on('click', 'button', function(e) {
    //    This both selects the first option of a select as well as looks for an option that might have had a default setting
    var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
    //    if opt.length is 0, this will do nothing and option 1 is already set, else this will set this default option to selected
    opt.prop('selected', 'selected');    
    // if you have an expected event tied to the select's "change" event, you might fire it here, like so:
    $('select').change();  
});

w / Out Comments, bonito y corto

$(document).on('click', 'button', function(e) {
    var opt = $('select').val(0).children('option').filter(function(i){ return this.hasAttribute('selected') });
    opt.prop('selected', 'selected');    
});

Ejemplo 1

Ejemplo 2 (con cambio de evento)


13
2017-07-08 12:31



"al valor predeterminado original"

No dice cómo está configurando el valor predeterminado, pero si el valor predeterminado es el primer elemento, puede decir:

document.getElementById('selectIdHere').selectedIndex = 0;
// or with jQuery
$("#selectIdHere").prop("selectedIndex", 0);

De lo contrario, puede guardar el elemento predeterminado cuando el DOM esté listo y configurarlo de nuevo en el clic del botón:

$(document).ready(function() {
    var $select = $("#selectIdHere");
    $select.data("default", $select.val());
    $("#buttonIdHere").click(function() {
         $select.val($select.data("default"));
    });
});

Tenga en cuenta que solo puede usar una variable local en el controlador listo en lugar de almacenar el valor con .data(), pero si quisiera hacer esto por más de un elemento, probablemente sería más manejable asociar el valor predeterminado directamente con el elemento usando .data().


1
2017-07-08 12:40



Te sugiero que eches un vistazo a la propiedad DOM predeterminadoSeleccionado.

EDITAR: Pero esto realmente depende de tu marcado HTML. defaultSelected requiere que uno de los <option>tiene el selected property.


0
2017-07-08 12:32



Solo necesitas hacer esto:

$("#yourresetbutton").on("click", function(){
   $("#yourDropDownId").val("default option value");
});

aquí #resetbutton es la identificación de su botón de reinicio, #yourDropDownId es el id de tu drop down y default option value será el valor de la opción predeterminada que se selecciona de forma predeterminada.

Actualizar si desea que se seleccione el elemento deshabilitado, es posible que lo anterior no funcione, puede intentar esto:

$("#yourresetbutton").on("click", function(){
   $("#yourDropDownId").find("option[val='yourDefaultValue']").attr("selected", "selected");
});

0
2017-07-08 12:38



Supongo que su marco HTML, o usted, de forma manual, están marcando el valor seleccionado predeterminado de DropDown como este, utilizando el atributo "seleccionado".

<select id="myCombo" >
    <option >1</option>
    <option selected="selected">2</option>
    <option >3</option>
  </select>  

<button id="reset">Reset Select</button>

Este atributo no será anulado por la interacción del usuario, solo JS podría interferir con este indicador, por lo tanto, use este atributo para "recordar" el valor predeterminado.

$('#reset').click(function(){      
     var self = $('#myCombo');
     self.val(self.find('option[selected]').val());
});

De esta forma, no tiene que agregar datos mágicos, atributos o cualquier cosa mágica que usted (o el próximo desarrollador) probablemente no recuerde establecer.

Puedes intentarlo aquí:

http://jsbin.com/azupog/1/edit


0
2017-07-08 12:55



Absolutamente, un botón de reinicio haría su trabajo.


-1
2017-07-08 12:33