Lựa chọn làm mới sau khi đã chọn tùy chọn được thay đổi bởi jQuery

Question

Tôi đang cập nhật tùy chọn đã chọn bằng lập trình bằng jQuery, nhưng không có gì thay đổi trong trình duyệt. (Tức là, tùy chọn đã chọn cũ vẫn được chọn thay vì chuyển sang tùy chọn mới được chọn.) Gợi ý?

Cảm ơn. --Jeff

Tôi có một hình thức đơn giản như thế này:

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

và mã jQuery của tôi trông như thế này:

<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

Tôi đang cập nhật tùy chọn chọn lập trình sử dụng jQuery

Không xa như tôi có thể thấy. Bạn đang thiết lập lại giá trị của option được chọn, nhưng không làm bất cứ điều gì theo như tôi có thể nói với hộp select thực tế.

Để thay đổi một hộp select, bạn cần phải xác định nó, sau đó gọi val trên nó, không một trong option phần tử của nó.

Tôi không thể làm ra những gì bạn muốn input[name="button1"] của bạn để làm, nhưng đây là một ví dụ về việc cập nhật một hộp 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"); 
    }); 

}); 

---

riêng, như j08691 chỉ ra trong các ý kiến, bạn không thể gán cùng giá trị id ("assigner") để hơn hơn một phần tử. id values must be unique trong tài liệu. Mã của bạn không hiển thị cho bạn bằng cách sử dụng số id đó, vì vậy, điều này có thể không liên quan, nhưng nó đáng được gắn cờ.

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>