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

Измените его с помощью идентификаторов, которые должны быть уникальными для использования классов, например:

<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>. значение. Этот подход работает для любого количества форм на странице.

Answer 2

атрибут id должен использоваться только один раз на вашей странице, его уникальный идентификатор для элемента. Если вы хотите выбрать несколько элементов, вы можете использовать следующий метод.

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

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

Answer 3

Нельзя использовать одинаковые id (choose, form) для нескольких элементов.Вам нужно использовать разные имена идентификаторов для каждого элемента на странице.После этого вы можете изменить свой код следующим образом:

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

Где choose и choose2 должны быть идентификаторами ваших полей выбора.в селекторе;он используется для добавления дополнительных выражений / элементов селектора в упакованный набор.В вашем случае это два поля выбора.

Answer 4

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>