Обновление выбора после выбранного варианта изменяется с помощью jQuery

Question

Я обновляю выбранный параметр программно с помощью jQuery, но в браузере ничего не меняется. (То есть старый выбранный параметр остается выбранным, а не переключается на вновь выбранную опцию.) Предложения?

Спасибо. --Jeff

У меня есть простая форма, как это:

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

и мой JQuery код выглядит следующим образом:

<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

Я обновляю выбранный вариант программно с помощью JQuery

Не настолько, насколько я могу видеть. Вы переустанавливаете значение выбранного option, но ничего не делаете, насколько я могу рассказать фактическому select.

Чтобы изменить select окно, вам нужно определить его, а затем вызвать val на это, ни один из его элементов option.

Я не могу разобрать, что вы хотите сделать input[name="button1"], но вот пример обновления select box: 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"); 
    }); 

}); 

---

Отдельно как j08691 отметил в комментариях, вы не можете назначить один и тот же id значение ("assigner") к более чем один элемент. id values must be unique в документе. Ваш код не показывает, что вы используете этот id, так что это может быть не связано, но стоит отметить.

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>