Tuesday, January 31, 2017

select option with multiple values

Here I will show you how to place multiple values in a select option and get the selected multiple values using jquery.
Previously I had show how to...
MVC: Code First Migrations in MVC 5Jquery DataTable in MVCJquery DataTable multisearch paging and Sorting in MVC server sideJquery DataTable paging, Sorting and Multi search with datepicker in MVC server sideCascading DropDowns in Asp.Net MVCAngularJS with Web Api in Asp.net MVC using Token based AuthenticationAjax helper Based Search in MVCCustomizing Authorize attribute or Role based Authentication or Authorization in MVCDisplay message when user is not authorized in mvcHow to use AutoMapperHow to use Jquery Validator

OutPut:


Use the below Html select option to store multiple values.

 <select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
    <option value="4" data-city="Bangalore" data-doj="16-10-2005">Jack</option>
    <option value="4" data-city="Chennai" data-doj="18-12-2005">Anthony</option>
  </select>
Use the below Code get multiple select option values using jquery.

$("#ddlEmployee").change(function () {
  var cntrol = $(this);
  
  var City = 'City : ' + cntrol.find(':selected').data('city');
  var doj = ', DOJ : ' + cntrol.find(':selected').data("doj");
  var value = ', Value : ' + cntrol.val();     
  var finalvalue = City + doj + value;
  
  if(cntrol.val() == "")
   finalvalue = "---";
  $('#lblSel').text(finalvalue);  
  
 });
The entire code looks as shown below

<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form id="myform">
<br/>
 <div class="container">
 <br>
 <div class="row">
   <div  class="col-xs-5">
    <label id="lblSel" style="color:green">----</Label>
   </div>
  </div> 
  <br>
  <div class="row">
   <div class="col-xs-3">
    <select id="ddlEmployee" class="form-control">
    <option value="">-- Select --</option>
    <option value="1" data-city="Washington" data-doj="20-06-2011">John</option>
    <option value="2" data-city="California" data-doj="10-05-2015">Clif</option>
    <option value="3" data-city="Delhi" data-doj="01-01-2008">Alexander</option>
    <option value="4" data-city="Bangalore" data-doj="16-10-2005">Jack</option>
    <option value="4" data-city="Chennai" data-doj="18-12-2005">Anthony</option>
  </select>
   </div>
  </div>
 </div>
</form>

<script type="text/javascript">
$(document).ready(function () {

    $("#ddlEmployee").change(function () {
  var cntrol = $(this);
  
  var City = 'City : ' + cntrol.find(':selected').data('city');
  var doj = ', DOJ : ' + cntrol.find(':selected').data("doj");
  var value = ', Value : ' + cntrol.val();     
  var finalvalue = City + doj + value;
  
  if(cntrol.val() == "")
   finalvalue = "---";
  $('#lblSel').text(finalvalue);  
  
 });

});
</script>
</html>


No comments:

Post a Comment