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

- jalperin

Answer 1

我正在使用jQuery通过编程方式更新所选选项。据我所见，你重新设置了所选选项的值，但在实际的元素上并未执行任何操作。要更改框，您需要识别它，然后在其上调用val()，而不是其元素之一。我无法理解您希望执行什么操作，但以下是更新框的示例：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值必须是唯一的。虽然您的代码没有显示您使用该id，因此这可能与之无关，但值得注意。

- T.J. Crowder

---

我的表单是从数据库查询生成的，因此我不一定知道选择框的ID（甚至不知道表单中会出现多少个）。此外，每个页面上都有多个表单（结构相似）。我想做的是允许用户使用第一个选择框中选择的选项更新表单上的所有SELECT框。因此，用户通过选择Harry并提交来将Harry分配给所有任务。我真正需要的，我想，是一种方法来选择与点击的按钮在同一表单上出现的所有SELECT框。 - jalperin

@jalperin: "我真正需要的，我想，是一种选择所有与点击的按钮出现在同一表单中的SELECT框的方法。" $(this).closest('form').find('select') 可以做到，在按钮的事件处理程序中使用。$(this)将按钮包装在jQuery对象中。closest('form')返回层次结构中最接近的form元素的jQuery对象。然后find('select')查找该表单中的所有select元素。 - T.J. Crowder

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>

- Mike