javascript - 为多个动态生成的选择提交时的 Jquery 选择值

Question

试图弄清楚是否以及如何仅通过使用类名来获取特定值。 有可能吗？

所有选择都是动态生成的，并且具有相同的类名。所有提交按钮也具有相同的类名。

<div>
<select class="mystat" name="mystat" style="width: 140px">
    <option value="1" selected="selected">option 1</option>
    <option value="2">option 2</option>
    <option value="3">option 3</option>
</select>
<button class="go-btn" type="submit">Update</button>
</div>


$(document).on('click', '.go-btn', function(){
    var mystat = $('.mystat').val();
    alert('Value is ' + mystat);
});

Fiddle

非常感谢任何帮助

Answer 1

使用相对于 $(this) 的 DOM 导航。

$(document).on('click', '.go-btn', function() {
  var mystat = $(this).siblings('.mystat').val();
  alert('Value is ' + mystat);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>
<div>
  <select class="mystat" name="mystat" style="width: 140px">
  <option value="1" selected="selected">option 1</option>
  <option value="2">option 2</option>
  <option value="3">option 3</option>
 </select>
  <button class="go-btn" type="submit">Update</button>
</div>