Javascript 如何从同一页面上的多个选择下拉列表中捕获值

我对Jquery非常陌生，所以如果这是一个愚蠢的问题，请原谅我

我的页面有20个类别。每个类别都有一个选择下拉列表，提供产品选项。用户将从每个类别中选择一个产品选项。每次选择一个选项时，将使用产品id值进行ajax调用，以获得价格。然后又做了一个选择，又做了一个选择

问题：我的PHP可以工作。但是，我的JQuery并没有从每个选择中获得唯一的product_id值。它可能会从第一次选择中获得值。然后第二个或第三个选择为空或重复第一个选择

我尝试过使用离散id、类和输入类型。而且还不能解决问题。这可能是无关的，但我正在使用引导和拉威尔以及

Jquery—省略了ajax调用。目前我只是想得到正确的值

$(document).ready(function() 
 $(".product_id" ).blur(function() {
 var value = null;            // this is intended to clear the previous value. 
 var value = $(".product_id").val()
 console.log('value', value);
});
})

页面视图示例：

<div class="collapse " id="Materials">
<div class="well form-group  ">
<div class="col-sm-2 col-md-2">{!! Form::label('materials1', 'Materials:') !!}</div>
 <div class="col-sm-4 col-md-4">{!! Form::select('product_code[1]',$products,null,['class'=>'form-control product_id','placeholder'=>'None']) !!}</div>
 <div class="col-sm-2  col-md-2">{!! Form::label('req1', 'Requirements:') !!}</div>
 <div class="col-sm-4 col-md-4">{!! Form::text('quantity[1]',null,['class'=>'form-control']) !!}</div>
 </div>

 <div class="well form-group  ">
 <div class="col-sm-2 col-md-2">{!! Form::label('materials2', 'Materials:') !!}</div>
 <div class="col-sm-4 col-md-4">{!! Form::select('product_code[2]', $materials,null, ['class'=>'form-control product_id','placeholder'=>'None']) !!}</div>
 <div class="col-sm-2  col-md-2">{!! Form::label('req2', 'Requirements:') !!}</div>
 <div class="col-sm-4 col-md-4">{!! Form::text('quantity[2]',null,['class'=>'form-control']) !!}</div>
 </div>
 </div>

---

我有一些想法给你。首先，不需要设置var value=null。当您声明var value=无论您声明的是什么，新变量都不会有任何旧值。其次，您需要将值设置为$this.val，因为您需要已模糊的.product_id的值。 我想你希望你的js看起来像这样：

$(".product_id" ).blur(function() {
 var value = $(this).val();
 console.log('value' + value);
});

---

我有一些想法给你。首先，不需要设置var value=null。当您声明var value=无论您声明的是什么，新变量都不会有任何旧值。其次，您需要将值设置为$this.val，因为您需要已模糊的.product_id的值。 我想你希望你的js看起来像这样：

$(".product_id" ).blur(function() {
 var value = $(this).val();
 console.log('value' + value);
});

TL；博士

我可以补充一点，您很可能希望使用.change方法而不是.blur。模糊需要元素失去焦点，或者换句话说，用户必须单击选项卡，或者单击其他位置以触发.blur事件。选择后将触发更改

$document.readyfunction{ $.product\u id.changefunction{ var值=$this.val； 警报“值：”+值； }; }; 材料 金 铜 要求 材料 银 矿石 要求 TL；博士

我可以补充一点，您很可能希望使用.change方法而不是.blur。模糊需要元素失去焦点，或者换句话说，用户必须单击选项卡，或者单击其他位置以触发.blur事件。选择后将触发更改

$document.readyfunction{ $.product\u id.changefunction{ var值=$this.val； 警报“值：”+值； }; }; 材料 金 铜 要求 材料 银 矿石 要求

---

你能发布解释过的HTML吗？我猜{！！Form:：label'materials1'，'Materials:'！！}解析为Materials，但为了清楚起见，您可以发布它吗。谢谢你发布解释过的HTML？我猜{！！Form:：label'materials1'，'Materials:'！！}解析为Materials，但为了清楚起见，您可以发布它吗。谢谢你是摇滚明星-非常感谢！！我对PHP/Laravel/Codeigniter很熟悉。。。。但出于某些该死的原因，JS和JQuery对我来说只是个谜。。。非常感谢！！你是摇滚明星-非常感谢！！我对PHP/Laravel/Codeigniter很熟悉。。。。但出于某些该死的原因，JS和JQuery对我来说只是个谜。。。非常感谢！！非常感谢您的回复-您帮助我更好地了解了JQuery！干杯非常感谢您的回复-您帮助我更好地了解了JQuery！干杯