Question

按钮后面有不同的选择（数量）

  <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button>
                    <select  id="quantity1"  class="ml-1">

                        <option value="4">4</option>

                    </select>

                     <button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button2</button>
                    <select  id="quantity1"  class="quantity ml-1"> 

                        <option value="3">3</option>

                    </select>

我想要的是当我点击button1时收到4，当点击button2时我收到3。

类似

 var nextoption =   $('button[id*="addtocart"]').click(function()  { console.log($(this).closest('select').text()); });

提前感谢。

Answer 1

closest()用于获取与选择器匹配的最近的父元素。 select元素是兄弟姐妹，因此您需要next()。另外，要获取所选选项的值，请使用val()：

＆＃13;

var nextoption = $('button[id*="addtocart"]').click(function() {
  console.log($(this).next('select').val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity1" class="quantity ml-1">
  <option value="3">3</option>
</select>

＆＃13;

Answer 2

只需使用 .next() 方法获取按钮的下一个兄弟元素，并且一如既往地使用 .val() 方法提取表单字段的当前值。

＆＃13;

$("button[id*='addtocart']").on("click", function(){
  console.log($(this).next().val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button1</button>
<select  id="quantity1"  class="ml-1">
   <option value="4">4</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2" >Button2</button>
<select  id="quantity1"  class="quantity ml-1"> 
  <option value="3">3</option>
</select>

＆＃13;

Answer 3

您还可以使用:selected访问所选选项。

$('#addtocart1').click(() => {
  console.log($('#quantity1 option:selected').val());
});

$('#addtocart2').click(() => {
  console.log($('#quantity2 option:selected').val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-sm btn-primary" id="addtocart1">Button1</button>
<select id="quantity1" class="ml-1">
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<button type="button" class="btn btn-sm btn-primary" id="addtocart2">Button2</button>
<select id="quantity2" class="quantity ml-1">
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
</select>

JQuery获取当前选择的当前选项值

3 个答案: