Develop Reference

how to pass selected value from selected page to next page?

<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
I want to show text which user selected from this dropdown to next page
for exmaple :- if user select age 5-9 from this page and user have see selected age to the next page like "selected age is 5-9"

You can use localStorage to save the selected age:
one.addEventListener("change", function(){
localStorage.setItem("age", this.value);
});
<select id="one" name="age">
<option value="0-50">Select Age</option>
<option value="0-4">0-4</option>
<option value="5-9">5-9</option>
<option value="10-14">10-14</option>
<option value="15-19">15-19</option>
</select>
And then retrieve the value in the other page as follows:
let age = (localStorage.getItem("age")) ? localStorage.getItem("age") : null;

You can define an onchange property with a callback function to set the value to a variable. Then pass it as params in the url or store them in localStorage.

Auto check saved data in jQuery Multiselect

I am using this jQuery Multiselect plugin https://github.com/nobleclem/jQuery-MultiSelect to convert all my select boxes that have the multiple attribute enabled in to drop down boxes with check boxes.
I load the options in the select box from a database.
Upon the form submission I can save the multiple selected data, but when I retreive data back from the database I cannot display the saved data back in the multi select box by checking matching check boxes.
The multiselect plugin has a loadOptions method, but using that method I have to generate all option data with option name, option value and the check status, and set it to the multiselect plugin. How can I easily do this if I have an array of data which must be checked/selected in the multiple select plugin?
HTML
<select name="abc" id="abc" multiple title="Test Number?">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
</select>
JS (I have more than one multiple select boxes and initiate them as shown below)
$.each($("select[multiple]"), function (key, selectbox) {
$("#" + selectbox.id).multiselect({
texts: {placeholder: $("#" + selectbox.id).attr("title")}
});
});
My saved data array is [1,3,4]
I need to set these saved data to the select box and check the check boxes without going through the loadOptions method.

You could use jQuery .filter() function on your select options to preselect those wanted before initializing the multiselect plugin.
Here,
$('option',this).filter((_,e) => saved_data.includes(+e.value)).prop('selected',true);
Preselects every option, before the .multiselect() call.
let saved_data = [1, 3, 4];
$('select[multiple]').each(function() {
$('option', this).filter((_, e) => saved_data.includes(+e.value)).prop('selected', true);
$(this).multiselect({
texts: {
placeholder: $(this).attr("title")
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://springstubbe.us/projects/demos/jquery-multiselect/scripts/index.js?1523890673"></script>
<link rel="stylesheet" href="https://springstubbe.us/projects/demos/jquery-multiselect/styles/index.css?1518818712">
<select name="abc" id="abc" multiple title="Test Number?">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
<option value="5">Test 5</option>
</select>

set a html option selected in a dropdown containing optgroup tag using javascript

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 ;

JQuery how to difference between a select option with an option selected attribute and a select without a selected value

I'm populating multiple select with a webservice.
This web service is returning the selected value.
Well, at the moment to render them, I have 2 different select
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>
Well, the first select hasn't any selected attribute and the second one has it.
When I execute:
$("select1").find("option:selected").val(); //Returns 1
$("select2").find("option:selected").val(); //Returns A
How I can identify when the select has an option really selected?

Instead of using :selected which looks for the selected state, you can look for [selected], which will check for the selected attribute.
var $selectedOption = $("#select1 option[selected]");
if ($selectedOption.length) {
//option selected
console.log(selectedOption.val() + " selected.");
} else {
//no option selected
console.log("Nothing selected.");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='select1'>
<option value='1'>Option 1</option>
<option value='3'>Option 3</option>
</select>
<select id='select2'>
<option selected="selected" value='A'>Option A</option>
<option value='B'>Option B</option>
</select>

You can use the has() jQuery method to find the select that has an option with the selected attribute.
$("select").has("option[selected]")
$("#select1").has("option[selected]").val() // undefined
$("#select2").has("option[selected]").val() // "A"

HIding or Showing Dropdown Options Based On Another Dropdown

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.