We Keep Coding

How to get pre selected value in dropdown jquery?

Im populating the dropdown with the selected value like this,
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option selected="3">Three</option>
</select>
To access the selected option im using:
var myOption = $('#myselect option:selected').val()
Here myOption returns "Three" as the value. How do i get the value i.e "3" and not the text?

it should be like
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected >Three</option>
</select>

you write selected=3 its not correct attribute check below code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
<script>
var myOption = $('#myselect option:selected').val();
alert(myOption);
</script>

You have to set value="3" and add additional property selected(just the tag as it is boolean in nature)
Try the below html code:
<select id="myselect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3" selected>Three</option>
</select>
$('#myselect option:selected').val() should give you "3"

dynamic drop down menu for labels

I currently have a drop down menu displaying 3 options. Once the user selects an option, another drop down menu will display itself based on the choice from the first menu.
The first dropdown(InDiameter):
<label for="innerdiameter"><i class="fa fa-asterisk text-danger"></i>1. Inner Diameter:(*)
<select id="InDiameter" name="InDiameter">
<option value="N/A">Select</option>
<option value="Standard(1.0-5.0mm)">Standard(1.0-5.0mm)</option>
<option value="Microcuff(0.3-0.75mm)">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs(56-250μm)">Nanocuffs(56-250μm)</option>
</select>
</label>
Second dropdown(Standard):
<label for="standard"> <br>1a. Inner Diameter for Standard:
<select id="Standard" name="Standard">
<option value="N/A">Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</label>
I've tried several js solutions, but none of them have worked. Any help would be appreciated.

in this case you need some one code of javascript and jquery:
the html code:
<label >Select:</label>
<select id="InDiameter" name="InDiameter" required onchange="miFuncion($(this).val());">
<option value="N/A">Select</option>
<option value="Standard">Standard(1.0-5.0mm)</option>
<option value="Microcuff">Microcuff(0.3-0.75mm)</option>
<option value="Nanocuffs">Nanocuffs(56-250μm)</option>
</select>
<div id="selectStandar" style="display:none;">
<label>Standard:</label>
<select id="Standard" name="Standard">
<option>Select</option>
<option value="1mm">1mm</option>
<option value="1.5mm">1.5mm</option>
<option value="2mm">2mm</option>
<option value="2.5mm">2.5mm</option>
<option value="3mm">3mm</option>
<option value="3.5mm">3.5mm</option>
<option value="4mm">4mm</option>
<option value="5mm">5mm</option>
</select>
</div>
<div id="selectMicrocuff" style="display:none;">
<label>Microcuff:</label>
<select id="Microcuff" name="Microcuff">
<option value="1">Microcuff 1</option>
<option value="2">Microcuff 2</option>
</select>
</div>
code jquery and Javascript
function miFuncion(value_selected){
if (value_selected=='Standard'){
$("#selectStandar").show();
$("#selectMicrocuff").hide();
}
if (value_selected=='Microcuff'){
$("#selectMicrocuff").show();
$("#selectStandar").hide();
}
}//end function
in this case i validate the first select(InDiameter), take the value and if is a Standard i show the div that have the select with the options Standard..and etc..
is only a method exist differentes methods..
Verify here

Enable Sequential Select Menus when you don't know the IDs

I have a set of Select Menus that are built from the variants in a product database (WooCommerce). There can be any number of them, usually from 3 to 8. Something simple like:
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
I want to enable them sequentially based on a selection being made in the previous menu. I don't need to change any options in the new menu - I just need to enable it.
So, if Select1 ≠ "Choose an option..." then enable Select2 and if Select2 ≠ "Choose an option..." then enable Select3.
The problem is I can't predict what the IDs are going to be, so I can't use a variant of:
$(function() {
$("#theID").change(function() {
if ($(this).val() == "Choose an option…") {
$("#theID_2").prop("disabled", true);
}
else
$("#theID_2").prop("disabled", false);
});
});
My question then: is there a way to sequence the enabling/disabling of Select menus using jQuery alone without knowing the ids in advance?
Is this just a crazy idea? Would I be better to try to build the javascript on the fly, reading the ids are they're written into the Selects server-side?

If the selects are in a sequential order to each other, you might be able to use JQuery.next():
http://api.jquery.com/next/
$("select").on('change', function(){
$(this).next("select").prop("disabled", false);
});
Example:
http://jsfiddle.net/Zv72Y/

If all these selects in one containers, then you can attach an event listener to each, which will unlock next select element:
HTML:
<div class='container'>
<select id="*Could be Anything*" name="*Could be Anything*">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
<select id="*Could be Anything*" name="*Could be Anything*" disabled="true">
<option>Choose an option...</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
</select>
</div>
Javascipt:
$('.container').on('change','select', function(){
$(this).nextAll('select').first().removeAttr('disabled');
});
$().nextAll() - Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
.first() will select first select after current and remove from him attritbute disabled.
Example: jsFiddle

How to run the onlick command after I choose the item in drop down menu?

Every time i click on the dropdown menu , the onlick trigger the function reload straight away. How can i make the function reload run after i select the item in the drop down menu list? Please help me ..
<form><select name="student" onclick='reload'>
<option value="A">Student A</option>
<option value="B">Student B</option>
<option value="C">Student C</option>
<option value="D">Student D</option>
<option value="E">Student E</option>

You should replace onClick with onChange
<form>
<select name="student" id="student" onChange='reload'>
<option value="A">Student A</option>
<option value="B">Student B</option>
<option value="C">Student C</option>
<option value="D">Student D</option>
<option value="E">Student E</option>
</select>
ideal way to do it
<script>
<!-- include the jQuery first -->
$('#student').on('change', function(e){
// reload or whatever you want to do
});
</script>

Try this:
<select name="student" onChange="javascript:alert('something');">
<option value="A">Student A</option>
<option value="B">Student B</option>
<option value="C">Student C</option>
<option value="D">Student D</option>
<option value="E">Student E</option>

Try changing onclick to onchange

onchange - the dropdown selected using jquery

i have a dropdown in the header and whatever the value is selected in the header should reflect the same in the detail dropdown, how should i do that? any leads?
$("#myddl").change(function()
{
//update all the dropdown list...
});
http://jsfiddle.net/abuhamzah/4QvfP/
Header:
<br />
<select id="myddl" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<p>Detail</p>
<br />
<select id="Select1" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select2" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select3" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select4" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>
<br />
<select id="Select5" name="myddl">
<option value="1">One</option>
<option value="2">Twooo</option>
<option value="3">Three</option>
</select>

Something along these lines will work. It wraps your "Detail" selects in a container to make selection somewhat simpler.
http://jsfiddle.net/qMXSR/2/
$("#myddl").change(function()
{
$('.detail').find('select').val($(this).val());
});​

Use $.on to bind to the "change" event. From here we target all select elements whose id begins with Select - which includes all of those below. Then we set their value(s) to that of the current one.
​$("#myddl").on("change", function(o){
$("select[id^=Select]").val(o.target.value);
});​​​​​​​​​​

This code will do it:
$(document).ready(function()
{
$("#myddl").live('change', function()
{
$("#Select1, #Select2, #Select3, #Select4, #Select5").val($(this).val());
});
});
The updated JS Fiddle is here: http://jsfiddle.net/leniel/4QvfP/7/

​$(function(){
$('#myddl').change(function(){
var value = $(this).val();
$('select[name=myddl] option[value='+value+']').attr('selected', 'selected');
});
})​

In the onchange of the first dropdown, you can jQuery select the other dropdowns and use a .each() to iterate and set the other options.