CODEWITHSUNDEEP
javascriptphpjqueryhtml
Vista
Vista

Reputation: 201

Dropdown display output

I have 2 dropdown, What I need is when a user select an option from the 2 dropdown. When a user clicks the button GO, it will display it selected option respectively

I want it to be like this, I'm only using label for better understanding

<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>

my brand dropdown is actually php.

Well here's my dropdown

<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>

Upvotes: 0

Views: 203

Answers (2)

bankiat
bankiat

Reputation: 36

You can use jQuery Selectors to search and match the elements in a document. For example, you can get the value of an element by using ID Selectors when you add an id to it:

$('#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>

Upvotes: 1

Ryan Churchill
Ryan Churchill

Reputation: 81

I am having a hard time determining what it is your trying to accomplish. If I am understanding your question, you want to have a particular option on your drop down selected? 

<option value="" selected="yes" style="color:gray;">Category</option>

Upvotes: 0

Related Questions