jQuery 如何让选择更改以多种形式工作？

Question

我从这里得到了这个脚本

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

Answer 1

将其从使用 ID 更改为使用类，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>的值。此方法适用于页面中任意数量的表单。