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>

Answer 2

试试这个，因为select标签位于每个块的按钮前面

var mystat = $（this）.prev（）。val（）;