jQuery更改了选择后刷新选择的选项

Refreshing select after selected option is changed by jQuery

本文关键字：选择 刷新 选项 jQuery      更新时间：2023-09-26

我正在使用jQuery以编程方式更新所选选项，但浏览器中没有任何变化。 （也就是说，旧的选定选项保持选中状态，而不是切换到新选择的选项。 建议？

谢谢。 --杰夫

我有一个简单的表格，如下所示：

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

我正在使用jQuery以编程方式更新所选选项

据我所知，没有。您正在重新设置所选option的值，但据我所知，没有对实际select框执行任何操作。

要更改select框，您需要识别它，然后对其调用val，而不是其option元素之一。

我无法弄清楚您希望input[name="button1"]做什么，但以下是更新select框的示例： 实时副本 | 来源

.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值在文档中必须是唯一的。您的代码没有显示您使用该id，因此这可能不相关，但值得标记。

<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>
相关文章：