jQuery如何以多种形式获得选择更改工作？答案

【问题标题】：jQuery how to get select change work in multiple form?jQuery如何以多种形式获得选择更改工作？
【发布时间】：2011-04-08 05:06:29
【问题描述】：

我从这里得到了这个脚本

$(document).ready(function() {
    $('#choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $('#choose').val()
  },
            function(data) {
                $('#update').html(data);
            }
        );            
    }); 
});
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>

我想用多种形式使用它，也希望它只以那种形式改变，任何人都可以帮我制作这样的代码

$(document).ready(function() {
    $('#choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $('#choose').val()
  },
            function(data) {
                $('#update').html(data);
            }
        );            
    }); 
});
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>
 <form id='form'>
    <div id="update"></div>
    <select name='selected' id="choose">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    </form>

【问题讨论】：

标签： jquery ajax forms select

【解决方案1】：

id 是页面唯一的，每个元素只能使用一次。

对于您的情况，首先要用类替换 id 并相应地更改 jQuery。

试试这个：

$(document).ready(function() {
    $('.choose').change(function(event) {
        $.post('select-ajax.php', { 
  selected: $(this).val()
  },
            function(data) {
                $(this).prev('.update').html(data);
            }
        );            
    }); 
});
 <form class='form' name="form1">
    <div class="update"></div>
    <select name='selected1' class="choose">
        <option value="test1">Test1</option>
        <option value="test2">Test2</option>
        <option value="test3">Test3</option>
    </select>
    </form>
 <form class='form' name="form2">
    <div class="update"></div>
    <select name='selected2' class="choose">
        <option value="1">111</option>
        <option value="2">222</option>
        <option value="3">333</option>
    </select>
    </form>

【讨论】：

这是不正确的，name 属性在页面上不是唯一的，甚至在<form> 中也不是唯一的。此外，您的回调不会更新任何内容，因为 this 将引用 jQuery 用于请求的 ajax 对象，不是已更改的 <select>。
这些不是唯一的例外，没有例外，因为没有规则......如果你愿意，你可以使用一个名字十几次，即使是相同的形式。
@Nick：很公平，那么最佳实践？
不……也不是这样，一个表单可能有 20 个任何项目，这非常好，甚至在批量数据输入中也很常见。

【解决方案2】：

将其从使用 ID 更改为使用类必须是唯一的，如下所示：

<form>
  <div class="update"></div>
    <select name='selected' class="choose">

然后让你的脚本相对查找元素，像这样：

$('.choose').change(function(event) {
  var update = $(this).prev();
  $.post('select-ajax.php', $(this).closest('form').serialize(), function(data) {
    update.html(data);
  });            
});

我在这里也使用.serialize() 来序列化<form>，您可以忽略它并使用{ selected: $(this).value() } 来传递仅 <select> 的值。这种方法适用于页面中任意数量的表单。

【讨论】：

@Choo - 欢迎 :) 请务必通过最能解决您的问题的问题旁边的复选标记来接受有关此问题和未来问题的答案，它可以帮助来自谷歌的下一个人并“关闭“问题:)

【解决方案3】：

您不能对多个元素使用相同的id（choose、form）。您需要为每个页面的每个元素使用不同的 id 名称。一旦你这样做了，你可以像这样修改你的代码：

$('#choose, #choose2').change(function(){
  // your code to handle two select boxes.
});

choose 和 choose2 应该是您的选择框的 ID。

注意选择器中的逗号；它用于向包装集添加更多选择器表达式/元素。在您的情况下，它代表两个选择框。

【讨论】：

【解决方案4】：

id属性只能在你的页面中使用一次，它是一个元素的唯一ID，如果你想选择多个元素可以使用以下方法。

<form id="search_users">....</form>
<form id="search_blogs">....</form>

$("#search_users,#search_blogs").change(...);

【讨论】：