I have a web form with multiple dropdown lists. I would like to only display options in the second list that share the same value as the selection in the first list.
<!-- Dropdown #1 -->
<div class="control-group">
<label class="control-label" for="select01">Select Tier</label>
<div class="controls">
<select id="select01">
<option value="all">All Tiers</option>
<option value="db">Database Tier</option>
<option value="app">Application Tier</option>
<option value="web">Web Tier</option>
</select>
</div>
</div>
<!-- Dropdown #2 -->
<div class="control-group">
<label class="control-label" for="select01">Select Audit Point</label>
<div class="controls">
<select id="select03">
<option value="all">Software Version</option>
<option value="all">Server OS, Memory, CPU</option>
<option value="all">High Availability</option>
<option value="db">DBMS Version</option>
<option value="db">DBMS Statistics</option>
<option value="db">DBMS Parameters</option>
<option value="db">DBMS Data File Growth</option>
<option value="db">Database Disk Structure</option>
<option value="db">Long Running SQL</option>
<option value="db">Security Data Growth Range</option>
<option value="db">Extraneous entries in System Tables</option>
<option value="db">Feed Error Orphans</option>
<option value="db">Position Detail Orphans</option>
<option value="db">Data Retention Policy</option>
<option value="db">Securities Added Daily</option>
<option value="db">Security Master Load</option>
<option value="db">SRM Purge</option>
<option value="db">Best Pricing Purge</option>
<option value="db">Partitioning</option>
<option value="db">DBMS Data/Log File Utilize Shared Disk</option>
<option value="db">DBMS Failover</option>
<option value="app">DBMS Client Version</option>
<option value="app">Star Engine IP Configuration</option>
<option value="app">Engine Count/Configuration</option>
<option value="app">STAR Engine Logging Interval</option>
<option value="app">PACE Engine Port Configuration</option>
<option value="app">PACE Server Logging</option>
<option value="app">PACE Engine Log Configuration</option>
<option value="app">STAR Engine Load Balancer Interval</option>
<option value="app">Engines Restarted Weekly</option>
<option value="app">Designated Master</option>
<option value="app">Cluster Managers Identical</option>
<option value="app">Uploader Shared Disk Space</option>
<option value="app">Custom Archive Rule Shared Disk Space</option>
<option value="app">App Server Clustering</option>
<option value="app">PACE Event Concurrency</option>
<option value="web">Homogenous Engine Configuration</option>
<option value="web">Log Levels</option>
<option value="web">Scheduler Purging</option>
<option value="web">Web Server Services Restarted Weekly</option>
<option value="web">Email Notification Basic Configuration</option>
<option value="web"n>Web Load Balancer Configuration</option>
<option value="web">Load Balancer Customizations</option>
<option value="web">Portal Shared Disk Space</option>
<option value="web">Message Center Shared Disk Space</option>
<option value="web">Message Center ID'S</option>
<option value="web">Schedule Service Config</option>
<option value="web">ePace is a client of Clustered App Servers</option>
<option value="web">Portal is a client of Clustered App Servers</option>
<option value="web">ESTAR is a client of Clustered Load Balancers</option>
<option value="web">ESTAR is a client of Clustered Engines</option>
<option value="web">ESTAR is a client of Clustered Report Export Services</option>
<option value="web">WebSync Configured</option>
<option value="web">Web Server Load Balancing Configured</option>
<option value="web">Shared Disk Dynamic Folder</option>
I need to be able to continuously change the list 1 selection, so I cannot .remove() unmatched options in the 2nd list. If I did remove them, I would then need to re-populate the 2nd list on each new selection from the 1st list.
Thank you for your help.
I have tested with your HTML-Code and works properly... You only have to modify this code so that there will be a filtered selection when loading the page.
jQuery(document).ready(function() {
var savedOptions = '';
savedOptions = jQuery('#select03').html(); //save the second dropdown-list
jQuery('#select01').change(function() {
var selectedValue = jQuery('#select01').val(); //After changing the value of the first dropdown, store this value inside a variable
jQuery('#select03').html(savedOptions); //restore the content of the 2nd dropdown
jQuery('#select03').children('option').each(function() {
if(jQuery(this).attr('value') != selectedValue) {
jQuery(this).remove(); //Compare and step through the 2nd dropdown and delete all unneccessary options
}
});
});
});
You can disable the options like so:
$("#select01").change(function() {
//Get value from the selected option
var filter = this.value;
//Loop thru second select options
$("#select02 option").each(function() {
//Enable the option (used for if the select changes values)
$(this).prop("disabled", false);
//Compare second select values to the initial selected value
if (this.value != filter) {
//Disable options that do not match
$(this).prop("disabled", true);
}
});
});
Demo: http://jsfiddle.net/QXhRy/
I suppose you could also completely remove the options as well, however, this would involve re-building the select each time you change the initial dropdown.
You cannot have duplicated option values inside the select element.
It is better you have a separate element that holds the options tag. And then replace the value with data-value attributes.
Try this
$('#select01').on('change', function() {
var $select03 = $('#select03'),
currValue = this.value;
$select03.empty();
var $options = $('.template option').filter(function() {
return $(this).data('value') === currValue
}).get();
$select03.append($options);
}).change();
Working Fiddle
Create a "map" of String arrays and populate from this as needed.
// initialize options on page load
var options = new Array();
options["all"] = new Array("A","B","C");
options["db"] = new Array("D","E","F");
function changeSecondDropDown(selectedValue)
{
// clear options from second drop down list
...
var optionsToAdd = options[selectedValue]
// loop through options and add them to second drop down list
...
}
Related
I'm working With Html(JSP) and Javascript. I have a dropdown box with id "examcenter" containing many optgroup as shown in the following code. in the function loadDrivingSchool() in javascript, I would like to set selected the value of the selected element. the loadDrivingSchool() function calls a controller in a server and when I return the view, the dropdown list does not have a selected value. I want to set this selected value to the value that the user choose before the reloading of the page. I have try the following Javascript code but it is not working:
document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;
<select id="examcenter" onchange="loadDrivingSchool();">
<optgroup label="ADAMAOUA">
<option value="1">TIBATI</option>
<option value="2">TIGNERE</option>
<option value="3">MEIGANGA</option>
<option value="4">BANYO</option>
<option value="5">NGAOUNDERE</option>
</optgroup>
<optgroup label="CENTRE">
<option value="6">YAOUNDE</option>
<option value="7">ESEKA</option>
<option value="8">AKONOLINGA</option>
<option value="9">NANGA EBOKO</option>
<option value="10">MONATELE</option>
<option value="11">MBALMAYO</option>
<option value="12">MFOU</option>
<option value="13">NGOUMOU</option>
<option value="14">BAFIA</option>
<option value="15">NTUI</option>
</optgroup>
<optgroup label="EXTREME NORD">
<option value="20">MAROUA</option>
<option value="21">KAELE</option>
<option value="22">KOUSSERI</option>
<option value="23">MORA</option>
<option value="24">YAGOUA</option>
<option value="25">MOKOLO</option>
</optgroup>
<optgroup label="EST">
<option value="16">YOKADOUMA</option>
<option value="17">ABONG-MBANG</option>
<option value="18">BATOURI</option>
<option value="19">BERTOUA</option>
<option value="62">NGUELEMENDOUKA</option>
</optgroup>
</select>
What I think you are trying to do is keep a track of what the user has selected, without submitting that selected option. That can only be achieved if you keep a record of that in some way, possibly using the session attribute.
You can probably store the value of the selected options in a session and then get it's value using AJAX.
But if I am wrong and you are trying to just simply get the value of the selected option without leaving that page, then you can try this to display the value of the selected option in your dropdown:
alert( document.getElementById("examcenter").value );
Also, I see a problem in your code. You are using
document.getElementById('examcenter').getElementsByTagName('option')[examCenter].selected = 'selected' ;
Instead, you should use:
document.getElementsByTagName('option').selected = true ;
I have 16 fields that need to be sorted by state. Originally, I made it so that there was four different divs because there's four different states people can choose from.
However, I ran into the issue of emails not going to the right people because the 16 fields are agents that people can choose and those agents need to have an email sent to them if they're chosen.
I keep finding multiple solutions for showing and hiding different divs but how do I hide or show options in a single sub-drop down menu?
Parent Dropdown Menu
State 1
State 2
State 3
State 4
Agent Dropdown Menu
Agent 1
Agent 2
Agent 3
Etc (all the way to agent 16)
How can I make it so that when a user selects State 1, it only shows a few options from the agent dropdown menu? The only solutions I can find are ones that have you split the sub-menu into different divs. We're using Contact Form 7 and the only thing people can see are the names but the emails are attached and those agents have to get an email when someone selects them.
HTML:
<select onchange="changeValues()" id="main-dd">
<option value="0">State 1</option>
<option value="1">State 2</option>
<option value="2">State 3</option>
<option value="3">State 4</option>
</select>
<select id="agent-dd"></select>
Javascript:
var AgentDDValues = [
['Agent 1','Agent 2'],
['Agent 3'],
['Agent 4'],['Agent 5'],
['Agent 6'],['Agent 7'],['Agent 8']
];
function changeValues(){
var e = document.getElementById("main-dd");
var selVal = e.options[e.selectedIndex].value;
$("#agent-dd").empty();
for(var i=0;i<AgentDDValues[selVal].length;i++){
$("#agent-dd").append('<option>'+AgentDDValues[selVal][i]+'</option>');
}
}
You can trigger off the change state in a select dropdown and hide options in the second one
HTML
<select id="s1">
<option disabled selected>pick an option</option>
<option data-id="1">option 1</option>
<option data-id="2">option 2</option>
</select>
<select id="s2">
<option class="1">sub option 1</option>
<option class="1">sub option 2</option>
<option class="1">sub option 3</option>
<option class="1">sub option 4</option>
<option class="2">sub option 5</option>
<option class="2">sub option 6</option>
<option class="2">sub option 7</option>
<option class="2">sub option 8</option>
</select>
Javascript/Jquery
$("#s1").on("change", function(){
var id = $("#s1 :selected").data("id");
if(id == 1){
$(".1").show();
$(".2").hide();
}
if(id == 2){
$(".1").hide();
$(".2").show();
}
});
Have a look at this fiddle I created
UPDATE:
In response to your comments you can add classes via Jquery like this:
var count = 0;
$("#s2 option").each(function(){
if(count < 4){
$(this).addClass("1");
}
else $(this).addClass("2");
count++;
});
This just uses a simple counter to add a "1" class to the first half of the options and then switch over to a "2" class for the second half.
I'm building a WordPress site that uses Custom Posts and Custom Fields to show a vehicle inventory. I would like the visitor to be able to filter the posts by Taxonomies...
The plugin I use for drilling the available Taxonomies (Query Multiple Taxonomies) outputs all options it can find for that particular Taxonomy into a dropdown list.
To prevent the dropdown list (i.e. Model) to become too long, I would like to show only those options that are based on the previous selection.
So when the visitor selects Vehicle = Cars, the dropdown for Manufacturer should only show the car manufacturers. When the visitor selects a manufacturer, i.e. Ford, the next dropdown for selecting a model should only show the models available for the previous selected manufacturer, in this case Ford...
The labels and level-0 values don't change but when I add or change a manufacturer or model, the level-1 and/or level-2 changes.
Not that important but, if possible, it would also be nice to strip everything not needed to show up in the "filtered" dropdown. In case of the Manufacturer dropdown, level-0 and all the spaces are not needed. In case of the Model dropdown, level-0, level1 and all the spaces are not needed after selection.
I can do some simple things with JavaScript but this is not simple to me, sorry... ;-)
I searched for tips and examples and tried to make it work but no luck.
Can someone please help me to figure out how to do this in jQuery?
Here is the code,
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-0" value="motorcycles">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-1" value="yamaha"> Yamaha</option>
</select>
<label for="qmt-model">Model:</label>
<select id="qmt-model" name="model">
<option></option>
<option class="level-0" value="cars">Cars</option>
<option class="level-1" value="ford"> Ford</option>
<option class="level-2" value="model-1-ford"> Model 1</option>
<option class="level-2" value="model-2-ford"> Model 2</option>
<option class="level-2" value="model-3-ford"> Model 3</option>
<option class="level-1" value="chevrolet"> Chevrolet</option>
<option class="level-2" value="model-1-chevrolet"> Model 1</option>
<option class="level-2" value="model-2-chevrolet"> Model 2</option>
<option class="level-2" value="model-3-chevrolet"> Model 3</option>
<option class="level-0" value="motoren">Motorcycles</option>
<option class="level-1" value="honda"> Honda</option>
<option class="level-2" value="model-1-honda"> Model 1</option>
<option class="level-2" value="model-2-honda"> Model 2</option>
<option class="level-2" value="model-3-honda"> Model 3</option>
<option class="level-1" value="yamaha"> Yamaha</option>
<option class="level-2" value="model-1-yamaha"> Model 1</option>
<option class="level-2" value="model-2-yamaha"> Model 2</option>
<option class="level-2" value="model-3-yamaha"> Model 3</option>
</select>
You need to use javascript, or jquery.
Here is how I do it.
Get the class that is selected:
var levelClass = $('#qmt-manufacturer').find('option:selected').attr('class');
Then use the level class to hide or show
$('#qmt-model option').each(function () {
var self = $(this);
self.hide();
if (self.hasClass(levelClass)) {
self.show();
}
});
Edit:
to clarify how to use this:
it uses a slightly altered version of the code
$(function(){
$("#qmt-vehicle").on("change",function(){
var levelClass = $('#qmt-vehicle').find('option:selected').attr('class');
console.log(levelClass);
$('#qmt-manufacturer option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="qmt-vehicle">Vehicle:</label>
<select id="qmt-vehicle" name="vehicle">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
</select>
<label for="qmt-manufacturer">Manufacturer:</label>
<select id="qmt-manufacturer" name="manufacturer">
<option></option>
<option class="car" value="cars">Cars</option>
<option class="car" value="ford"> Ford</option>
<option class="car" value="chevrolet"> Chevrolet</option>
<option class="motorcycle" value="motorcycles">Motorcycles</option>
<option class="motorcycle" value="honda"> Honda</option>
<option class="motorcycle" value="yamaha"> Yamaha</option>
</select>
There is another way to achieve this --- Check this Fiddle example: Fiddle
You can learn from this example and add according logic which you need for the third option box.
jQuery Code:
$('#qmt-vehicle').on('change', function () {
//alert(this.value); // or $(this).val()
if (this.value == 'cars') {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"ford\"> Ford</option><option class=\"level-1\" value=\"chevrolet\"> Chevrolet</option>");
} else {
$("#qmt-manufacturer").html(
"<option class=\"level-1\" value=\"honda\"> Honda</option><option class=\"level-1\" value=\"yamaha\"> Yamaha</option>");
}
});
A Javascript might help you...
You can add an "onchange" event (in Javascript) in your "select" component. Also, add an ID for the labels.
Example:
<label for="qmt-manufacturer" id="lblManufacturer">
<select id="qmt-manufacturer" name="manufacturer"
onchange="changeManufacturer(this.value);">
Using a script tag, build your method in javascript as following:
<script type="text/javascript">
function changeManufacturer(manufacturerValue){
switch(manufacturerValue){
case ford:
document.getElementById('lblManufacturer').innerHTML = 'FORD';
break;
case chevrolet:
document.getElementById('lblManufacturer').innerHTML = 'Chevrolet';
break;
}
// And so on for other values...
}
</script>
this code above changes the Label Text running time, implement it to make changes in your second dropdown (Model)
Hope it helps you.
Have a form field asking for a product, these are various sizes, the second form field asks for the quantity.
The stock quantity of each product is shown in the first select, I want the second select to be a maximum of the stock available so customers cannot order more than I have available.
This is the first select (also linked to show custom pictures) Site is ASP
<select name="barcode" id="imageselect">
<option value>Please Select .....</option>
<option value="322974">6.6lbs 100m - £21.00 ( 2 in stock )</option>
<option value="322975">8.2lbs 100m - £21.00 ( 3 in stock )</option>
<option value="322976"disabled=disabled>10.4lbs 100m - £21.00 - Out of stock</option>
<option value="323656">13.7lbs 100ms - £21.00 ( 4 in stock )</option>
</select>
This is the second select:
<select name="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
Have tried using onchange event but with no joy.
The UK Autotrader has a very good example of this working with their car makes / models.
This should do what you want...
NB: I've used a shot cut by adding a 'stock' attribute to your options, just to avoid parsing the string.
<option value="322974">6.6lbs 100m - £21.00 ( 2 in stock )</option>
If you want to avoid this, the example below also shows you how to get the text to parse for the stock attribute.
$("#imageselect").change(function(event){
var $this = $(this),
value = $this.val();
var $option = $("option[value="+value+"]", $this),
text = $option.text(), // you could parse this to get stock OR
stock = parseInt($option.attr('stock')); // short-cut: use stock attr
// only show the first n options:
var $opts = $("select[name=quantity] option");
$opts.hide().slice(0, stock).show();
});
The second select will show the maximum stock. So what you need to do is store the values in the database, fetch max value and as you are using asp , call the page with ajax which will be shown here as a select option
I want set a dropdown(select) to be change based on the value of the entries.
I have
<select id="mySelect">
<option value="ps">Please Select</option>
<option value="ab">Fred</option>
<option value="fg">George</option>
<option value="ac">Dave</option>
</select>
And I know that I want to change the dropdown so that the option with the value of "fg" is selected. How can I do this with JQuery?
You should use
$('#dropdownid').val('selectedvalue');
Here's an example:
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
$('#yourdropddownid').val('fg');
Optionally,
$('select>option:eq(3)').attr('selected', true);
where 3 is the index of the option you want.
Live Demo
$('#mySelect').val('fg');...........
$('#mySelect').val('ab').change();
// or
$('#mySelect').val('ab').trigger("change");
You can use this jQuery code which I find it eaiser to use:
$('#your_id [value=3]').attr('selected', 'true');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="your_id" name="name" class="form-control input-md">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
<option value="3">Option #3</option>
<option value="4">Option #4</option>
<option value="5">Option #5</option>
<option value="6">Option #6</option>
<option value="7">Option #7</option>
</select>
You can simply use:
$('#select_id').val('fg')
In your case $("#mySelect").val("fg") :)
May be too late to answer, but at least some one will get help.
You can try two options:
This is the result when you want to assign based on index value, where '0' is Index.
$('#mySelect').prop('selectedIndex', 0);
don't use 'attr' since it is deprecated with latest jquery.
When you want to select based on option value then choose this :
$('#mySelect').val('fg');
where 'fg' is the option value
$('#dropdownid').val('selectedvalue');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='dropdownid'>
<option value=''>- Please choose -</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='selectedvalue'>There we go!</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
This code worked for me:
$(function() {
$('[id=mycolors] option').filter(function() {
return ($(this).text() == 'Green'); //To select Green
}).prop('selected', true);
});
With this HTML select list:
<select id="mycolors">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
I have a different situation, where the drop down list values are already hard coded. There are only 12 districts so the jQuery Autocomplete UI control isn't populated by code.
The solution is much easier. Because I had to wade through other posts where it was assumed the control was being dynamically loaded, wasn't finding what I needed and then finally figured it out.
So where you have HTML as below, setting the selected index is set like this, note the -input part, which is in addition to the drop down id:
$('#project-locationSearch-dist-input').val('1');
<label id="lblDistDDL" for="project-locationSearch-input-dist" title="Select a district to populate SPNs and PIDs or enter a known SPN or PID." class="control-label">District</label>
<select id="project-locationSearch-dist" data-tabindex="1">
<option id="optDistrictOne" value="01">1</option>
<option id="optDistrictTwo" value="02">2</option>
<option id="optDistrictThree" value="03">3</option>
<option id="optDistrictFour" value="04">4</option>
<option id="optDistrictFive" value="05">5</option>
<option id="optDistrictSix" value="06">6</option>
<option id="optDistrictSeven" value="07">7</option>
<option id="optDistrictEight" value="08">8</option>
<option id="optDistrictNine" value="09">9</option>
<option id="optDistrictTen" value="10">10</option>
<option id="optDistrictEleven" value="11">11</option>
<option id="optDistrictTwelve" value="12">12</option>
</select>
Something else figured out about the Autocomplete control is how to properly disable/empty it. We have 3 controls working together, 2 of them mutually exclusive:
//SPN
spnDDL.combobox({
select: function (event, ui) {
var spnVal = spnDDL.val();
//fire search event
$('#project-locationSearch-pid-input').val('');
$('#project-locationSearch-pid-input').prop('disabled', true);
pidDDL.empty(); //empty the pid list
}
});
//get the labels so we have their tool tips to hand.
//this way we don't set id values on each label
spnDDL.siblings('label').tooltip();
//PID
pidDDL.combobox({
select: function (event, ui) {
var pidVal = pidDDL.val();
//fire search event
$('#project-locationSearch-spn-input').val('');
$('#project-locationSearch-spn-input').prop('disabled', true);
spnDDL.empty(); //empty the spn list
}
});
Some of this is beyond the scope of the post and I don't know where to put it exactly. Since this is very helpful and took some time to figure out, it's being shared.
Und Also ... to enable a control like this, it's (disabled, false) and NOT (enabled, true) -- that also took a bit of time to figure out. :)
The only other thing to note, much in addition to the post, is:
/*
Note, when working with the jQuery Autocomplete UI control,
the xxx-input control is a text input created at the time a selection
from the drop down is picked. Thus, it's created at that point in time
and its value must be picked fresh. Can't be put into a var and re-used
like the drop down list part of the UI control. So you get spnDDL.empty()
where spnDDL is a var created like var spnDDL = $('#spnDDL); But you can't
do this with the input part of the control. Winded explanation, yes. That's how
I have to do my notes or 6 months from now I won't know what a short hand note means
at all. :)
*/
//district
$('#project-locationSearch-dist').combobox({
select: function (event, ui) {
//enable spn and pid drop downs
$('#project-locationSearch-pid-input').prop('disabled', false);
$('#project-locationSearch-spn-input').prop('disabled', false);
//clear them of old values
pidDDL.empty();
spnDDL.empty();
//get new values
GetSPNsByDistrict(districtDDL.val());
GetPIDsByDistrict(districtDDL.val());
}
});
All shared because it took too long to learn these things on the fly. Hope this is helpful.
You can select dropdown option value by name
// deom
jQuery("#option_id").find("option:contains('Monday')").each(function()
{
if( jQuery(this).text() == 'Monday' )
{
jQuery(this).attr("selected","selected");
}
});
$('select#myselect option[value="ab"]')
either can be used to get the selected option value
$('#dropdownID').on('change', function () {
var dropdownselected=$("#dropdownID option:selected").val();
});
or
$('#dropdownID').on('change', function () {
var dropdownselected=this.selectedOptions[0].value;
});