ReddyInfoSoft: 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 5, Jquery DataTable in MVC, Jquery DataTable multisearch paging and Sorting in MVC server side, Jquery DataTable paging, Sorting and Multi search with datepicker in MVC server side, Cascading DropDowns in Asp.Net MVC, AngularJS with Web Api in Asp.net MVC using Token based Authentication, Ajax helper Based Search in MVC, Customizing Authorize attribute or Role based Authentication or Authorization in MVC, Display message when user is not authorized in mvc, How to use AutoMapper, How to use Jquery Validator

OutPut:

AngularJS: Two way Binding in AngularJS, Simple Routing in AngularJS, Datatables in AngularJS and asp.net mvc, Datatables Column Filter with AngularJS and asp.net mvc, Datatable Exporting with AngularJS and asp.net mvc

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>

ReddyInfoSoft

Tuesday, January 31, 2017

select option with multiple values

No comments:

Post a Comment