Develop Reference

Get pre-selected value of an HTML select element

Or through example, how can one retrieve "c" via JavaScript or jQuery no matter if the user changed it?
<select id="select-menu">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>
I tried the following, however, it returns the value of the currently selected menu. I suppose I can take a similar approach which runs upon page load and save the value, but expect there is a more "proper" way to do so.
$('#select-menu > option').each(function(i){
if(this.selected) {
console.log(this.value)
$("#submit").val(this.value);
return false;
}
})

Use jQuery .attr() to get initial value:
function get_initial(){
$('#select-menu > option').each(function(i){
if($(this).attr('selected')) {
console.log('initial: ' + this.value)
}
if(this.selected) {
console.log('current: ' + this.value)
}
})
}
$('.initial').on('click', get_initial);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select-menu">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>
<button class="initial">check initial</button>

There is no better way. A select is meant to be user-modifiable.
If you want to retain the original value you could save it on load:
$(document).ready(function() {
var initialValue = $("#select-menu").val();
});
You could also write it in a hidden input:
<input type="hidden" name="initial-select-menu" value="c">
This way has the benefit that the value will be submitted along with the rest of the form. Might be preferable in some cases.
Or you could stuff that initial value in a data attribute:
<select id="select-menu" data-initial="c">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>

You could save the value on an html5 data-* attribute:
<select id="select-menu" data-default="c">
And get it with
$("#select-menu").attr("data-default");

The following code exhibits various examples related to getting of values from select fields using JavaScript.
Working Snippet
const selectMenu = document.getElementById("select-menu");
var selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
/*Option 1*/
selectMenu.onchange = function() {
selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
}
/*Option 2*/
/*selectMenu.addEventListener("change", function(){
selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
})*/
/*Option 3*/
/*function updateSelectedIndex() {
selectedIndex = selectMenu.options[selectMenu.selectedIndex].value;
}*/
document.writeln(selectedIndex);
<!-- Option 3 -->
<!-- <select id="select-menu" onchange="updateSelectedIndex"> -->
<select id="select-menu">
<option value="a">A</option>
<option value="b">B</option>
<option value="c" selected>C</option>
<option value="d">D</option>
</select>

Try this for the appropriate cases:
let preselectedOption = $(targetDropDown).find('option[selected]');
let currentOption = $(targetDropDown).find('option:selected');

Select value using jQuery in same order with select2

I have a select2 multiselect dropdown.
<select class="select2" multiselect>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
<option value="E">E</option>
</select>
I want to select multiselect on page ready so I tried below code to achieve. But every time I got result in sorted form. But I want selected items in same order.
$('.select2').select2();
$(document).ready(function(){
$('.select2').val(['B','E','A']).trigger('change');
$("select").on("select2:select", function (evt) {
var element = evt.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
});
})
Note: when I select manually, it's working fine. But on trigger, it's not working

Animate CSS on selection of <option>

I am attempting to trigger a change of CSS for some objects further down in my code when one of the option tags is selected. I did not include them here as they are not pertinent to the issue at hand which is the jQuery. I am at a loss at this point. Here is what I have so far...is it even possible?
<script>
$(document).ready(function(){
$("#feed-filter option:selected").change(function () {
$("#CA, #GA, #GD").animate({height: '0px'});
})
})
</script>
<div class="feed-filter">
<select id="feed-filter" name="feed-filter">
<option id="option-ALL" value="ALL" selected>ALL</option>
<option id="option-CA" value="A">A</option>
<option id="option-DAD" value="B">B</option>
<option id="option-GA" value="C">C</option>
<option id="option-GD" value="D">D</option>
</select>
</div>

firstly you aren't triggering a CSS animation, that is a jQuery animation. Secondly, the ID's you are animating don't exist in the HTML, and thirdly, your selector/listener is invalid, you need to listen to $('select').change();
If you need to then access the value of the selected option you can do so by doing something like this
$('select').change(function() {
var val = $(this).val();
});

HTML onchange attribute not working for select element

I have a couple select elements with onchange attributes that fire a different functions. For some reason, the function is not running through. I think the problem is in the onchange attribute. Here is the HTML:
<select id="select_level" onchange="updateJumpLevelLink(this.SelectedIndex.value)">
<option value="easy">Level</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<select id="select_puzzle" onchange="updateJumpPuzzleLink(this.SelectedIndex.value)">
<option value="1">Puzzle</option>
<option value="1">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>
<div id="jump">Jump</div>
This is the javascript:
$(document).ready(function() {
for (i = 1; i <= 10; i++) {
$('#select_puzzle').append('<option value="'+i+'">'+i+'</option>');
}
function updateJumpLevelLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+new_value+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
}
function updateJumpPuzzleLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+new_value);
}
});
Let me know if you see the problem here. Thanks.

i dont know what you want to do in your project, but if the case is onchange, i think this will help you, add jQuery in your JS Libraries it will help you a lot here is my example onCHange sample using jQuery
$( "#select_level" ).change(function() {
alert($(this).val());
});

Fiddle full working.
i used
$( "#select_level" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+$(this).val()+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
});
$( "#select_puzzle" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+$(this).val());
});

Your first problem is that your functions are defined in the document ready, so it won't work because the functions technically don't exist on the global scale. You need to move it outside the document.ready().
Your second problem is that you're passing the wrong value. "this.SelectedIndex.value" should be "this.Value", otherwise it doesn't send anything into the function.
<select id="select_level" onchange="updateJumpLevelLink(this.value)">
Here's the fix: http://jsfiddle.net/yBe6J/3/

Send select value to JS function

I have the next menu in HTML:
<select name="p1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
Now, I want to send it to my JS function:
function myFunc(menuValue){
//do something
}
How can I do it?

Something like this :
Javascript :
var selectObj = document.querySelector("#selectID"),
displayObj = document.querySelector(".display");
selectObj.onchange = function(evt){
myFunc(this.value);
}
function myFunc(menuValue){
displayObj.innerHTML = menuValue;
}
HTML :
<select id = "selectID" name="p1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div class='display'></div>
http://jsfiddle.net/NeekGerd/4H5aq/

So you want to get the value of the selected option onchange of option value right? You can try this way:-
http://jsfiddle.net/T8CKU/
<select name="p1" onchange="myfunc(this.value);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(menuValue){
alert(menuValue)
}
Here inside myFunc the context of `this would be the window. If you want to get the context inside the window as the dropdown itself you can use apply or call.
<select name="p1" onchange="myFunc.call(this);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(){
alert(this.value); //This will give the value again.
}

The select element in HTML offers an onchange event that fires if you select a new value (new = an option that was not selected).
<select name="p1" onchange="myFunc(option);">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
function myFunc(option) {
// whatever you need to do
};