JQuery, как получить выбрать изменить изображение, AJAX работать в нескольких формах?

Question

Мне нужно выбрать изменить некоторые данные и изменить изображение в собственной форме у каждого из них будет собственное изображение для предварительного просмотра. каждое изображение получит attr имя "imagePreview" из выбранной опции. если ничего в attr или imagePreview = "0" ничего не сделает

вот некоторые из моих рабочих скриптов, но когда я меняю опцию, все изображения в теге DIV изменятся не только в форме пожалуйста, помогите мне заставить это работать>. <</p>

1010 * сценарий *

<script type="text/javascript">
$(document).ready(function() {
$('.choose').change(function(event) {
  var update = $(this).prev();
  //------
  var src = $("option:selected").attr("imagePreview");
  $(".imagePreview").html(src ? "<img src='" + src + "'>" : "");
  //-----
  $.post('select-change-ajax2.php', $(this).closest('form').serialize(), function(data) {
    update.html(data);
  });
});
});
</script>

HTML-форма

<form>
<div class="imagePreview">
   displays image here
</div>
( etc data this data not change )
 <div class="update">Default Data</div>
    <select name='selected' class="choose">
        <option value="1" imagePreview='/images/1.jpg'>1</option>
        <option value="2" imagePreview='0'>2</option>
       </select>
       <input type='hidden' name='do' value='go' />
</form>

<hr />

<form>
<div class="imagePreview">
   displays image here
</div>
( etc data this data not change )
 <div class="update">Default Data</div>
    <select name='selected' class="choose">
        <option value="3" imagePreview='/images/1.jpg'>3</option>
        <option value="4" imagePreview='0'>4</option>
       </select>
       <input type='hidden' name='do' value='go' />
</form>

Answer 1

Вы можете найти важные элементы (.imagePreview и <option>) относительно , например:

$(function() {
  $('.choose').change(function(event) {
    var form = $(this).closest("form"),
        update = form.find(".update"),
        src = $(this).find("option:selected").attr("imagePreview");
    form.find(".imagePreview").html(src ? "<img src='" + src + "'>" : "");
    $.post('select-change-ajax2.php', form.serialize(), function(data) {
      update.html(data);
    });
  });
});

Ключ меняется $("option:selected") и $(".imagePreview") быть относительно элемента изменений, а не выбирать первый / все, что они находят, соответственно.

До того, как он нашел первый выбранный <option> в любой <form> и все .imagePreview элементов, не используя обход дерева мы находим нужные вам элементы относительно <select> (this), который изменился.