javascript - 下拉显示输出

Question

我有 2 个下拉列表，我需要的是当用户从 2 个下拉列表中选择一个选项时。当用户点击GO按钮时，会分别显示所选择的选项

我希望它是这样的，我只是使用标签来更好地理解

<label for="bl" class="control-label col-xs-3"><p class="left">Branch:</p></label><p>Branch A</p>

<label for="bl" class="control-label col-xs-3"><p class="left">Category:</p></label><p>Stock</p>

我的品牌下拉列表实际上是 php。

这是我的下拉列表

<div class="col-xs-8">
<div class="req">
 <select name="bid" class="form-control">
<option value="" default style="color:gray;">Branch</option>
<option value="brancha">Branch A</option>
<option value="branchb">Branch B</option>
<option value="branchc">Branch C</option>
</select>
</div>
</div>

   <div class="col-xs-8">
	<div class="req">
     <select name="brcat" class="form-control">
	<option value="" default style="color:gray;">Category</option>
	<option value="Stock">Stock</option>
	<option value="Sales">Sales</option>
	<option value="Stock Transfer">Stock Transfer</option>
	</select>
	</div>
	</div>

<button type="submit" class="btn btn-default bt" style="align:right;">Go</button> 

Answer 1

您可以使用jQuery Selectors搜索并匹配文档中的元素。例如，您可以使用 ID Selectors 获取元素的值。当您向其添加 id 时:

$('#go_btn').on('click', function(){
  var branch = $('#branch_opt option:selected').val();
  var category = $('#category_opt option:selected').val();
  $('#branch_div').html('Branch : '+branch);
  $('#category_div').html('Category : '+category);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="branch_opt">
  <option value="">Branch</option>
  <option value="brancha">Branch A</option>
  <option value="branchb">Branch B</option>
  <option value="branchc">Branch C</option>
</select>

<select id="category_opt">
  <option value="">Category</option>
  <option value="Stock">Stock</option>
  <option value="Sales">Sales</option>
  <option value="Stock Transfer">Stock Transfer</option>
</select>

<input type="button" id="go_btn" value="Go">

<div id="branch_div"></div>
<div id="category_div"></div>