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> 

拿到這個劇本，我想多PLE形式使用它，也希望它改變只在形式，任何人可以幫助我，使代碼就這樣

$(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，它必須是唯一的使用類，像這樣：

<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是頁面唯一的，每個元素只能使用一次。

你的情況第一件事就是用類替換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>