La opción de actualizar después de seleccionar ha sido modificada por jQuery

Question

Estoy actualizando la opción seleccionada mediante programación mediante jQuery, pero no hay cambios en el navegador. (Es decir, la opción seleccionada anterior permanece seleccionada en lugar de cambiar a la opción recién seleccionada.) ¿Sugerencias?

Gracias. --Jeff

Tengo una forma simple como esto:

<form id="form1" name="form1" method="" action=""> 
<p>Assign: 
<select name="assigner" id="assigner"> 
<option value="Sam" selected="selected">Sam</option> 
    <option value="Harry">Harry</option> 
    <option value="Fred">Fred</option> 
</select> 
<input type="button" name="button1" id="button1" value="Submit" /> 
</p> 
<p> Task A: <select name="assignment[]" id="assigner"> 
    <option value="Sam">Sam</option> 
    <option value="Harry" selected="selected">Harry</option> 
    <option value="Fred">Fred</option> 
</select> 
</p> 
<p>  
Task B: <select name="assignment[]" id="assigner"> 
    <option value="Sam">Sam</option> 
    <option value="Harry" selected="selected">Harry</option> 
    <option value="Fred">Fred</option> 
</select> 
</p> 
</form></div> 

y mi código de jQuery se ve así:

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$('[name="button1"]').click(
    function(){ 
     var form = $(this).parents('form'); 
     var assigned = form.find(':selected').first().val(); 
     form.find(':selected').each(function(index){ 
      $(this).val(assigned).change(); 
     }); 
    } 
); 
}); 
</script> 

Answer 1

estoy actualizando la opción seleccionada mediante programación utilizando jQuery

No es tan lejos como puedo ver. Está restableciendo el valor del option seleccionado, pero no hago nada por lo que puedo decir al cuadro select.

Para cambiar un cuadro de select, es necesario identificarla, a continuación, llamar val en que, ni uno solo de sus elementos option.

No puedo distinguir lo que quiere que su input[name="button1"] haga, pero aquí hay un ejemplo de actualización de una casilla select: Live copy | source

HTML:

<select id="theSelect"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 
<input type="button" id="theButton" value="Click me"> 

JavaScript:

jQuery(function($) { 

    $("#theButton").click(function() { 
    $("#theSelect").val("2"); 
    }); 

}); 

---

Por otra parte, como j08691 señaló en los comentarios, no se puede asignar el mismo valor id ("assigner") a más de un elemento id values must be unique en el documento. Su código no muestra el uso de ese id, por lo que puede no estar relacionado, pero vale la pena marcar.

Answer 2

<form id="form1" name="form1" method="" action=""> 
    <p>Assign: 
     <select name="assigner" id="assigner"> 
      <option value="Sam" selected="selected">Sam</option> 
      <option value="Harry">Harry</option> 
      <option value="Fred">Fred</option> 
     </select> 
     <input type="button" name="button1" id="button1" value="Submit" /> 
    </p> 
    <p> 
     Task A: <select name="assignment[]" id="assigner2"> 
      <option value="Sam">Sam</option> 
      <option value="Harry" selected="selected">Harry</option> 
      <option value="Fred">Fred</option> 
     </select> 
    </p> 
    <p>  
     Task B: <select name="assignment[]" id="assigner3"> 
      <option value="Sam">Sam</option> 
      <option value="Harry" selected="selected">Harry</option> 
      <option value="Fred">Fred</option> 
     </select> 
    </p> 
</form> 



<script type="text/javascript"> 
jQuery(document).ready(function(){ 
$('[name="button1"]').click(
    function(){ 
     var assigned = $("#assigner").val(); 
     $('#form1 select').val(assigned); 
    } 
); 
}); 
</script>