Question

我对Jquery很新，所以如果这是一个愚蠢的问题，请原谅我。

我的页面有20个类别。每个类别都有一个选择下拉列表，提供产品选项。用户将从每个类别中选择产品选项。每次选择一个选项时，都会使用product_id（值）进行ajax调用以获取价格。然后做出另一个选择和另一个。

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

我尝试过使用离散的#id，类和输入类型。并且无法解决问题。这可能是无关紧要的，但我也在使用Bootstrap和Laravel。

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>

Answer 1

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

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

Answer 2

<强> TL; DR

$(document).ready(function() {
    $(".product_id" ).change(function() {
    var value = $(this).val();
    console.log('value: '+ value);
  });
});

我可以补充一点，您很可能希望使用.change方法(doc)代替.blur (doc)。 .blur要求元素松散焦点，或者换句话说，用户必须选项卡，或者单击其他位置以触发.blur事件。选择完成后，.change会触发。

$(document).ready(function() {
	$(".product_id" ).change(function() {
  	var value = $(this).val();
    alert('value: '+ value);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collapse " id="Materials">
  <div class="well form-group  ">
    <form>
      <div class="col-sm-2 col-md-2">
        <label id='materials1'>Materials</label>
      </div>
      <div class="col-sm-4 col-md-4">
        <select class='product_id'>
          <option>Gold</option>
          <option>Copper</option>
        </select>
      </div>
      <div class="col-sm-2  col-md-2">
        <label id='req1'>Requirements</label>
      </div>
      <div class="col-sm-4 col-md-4">
        <input type='text' />
      </div>
    </form>
  </div>
  <div class="well form-group  ">
    <from>
      <div class="col-sm-2 col-md-2">
        <label id='materials2'>Materials</label>
      </div>
      <div class="col-sm-4 col-md-4">
        <select class='product_id'>
          <option>Silver</option>
          <option>Ore</option>
        </select>
      </div>
      <div class="col-sm-2  col-md-2"><label id='req2'>Requirements</label></div>
      <div class="col-sm-4 col-md-4"><input type='text' /></div>
    </from>
  </div>
</div>

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

2 个答案: