Develop Reference

How to trigger the onclick / onchange event for a already selected option clicks in javascript

I am trying to get option value of an already selected option in the select choice list. How can I make it possible. Here is my code snippet
$(document).ready(function(){
$("#getCusineType").bind('click', function() {
alert($(this).find('option:selected').val());
});
$("#getCusineType").bind('focusout', function() {
alert($(this).find('option:selected').val());
});
function getCusineType(){
var getCusineType = $('#getCusineType').val();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="getCusineType" onchange="getCusineType()">
<option value="1">Indian</option>
<option value="2">American</option>
<option value="3">Italian</option>
<option value="4">General</option>
</select>

If you want to get selected option value:
var value=$("#getCusineType").val();
or text
var text=$("#getCusineType option:selected").text();
If you want to get the selected value after change event, you should bind a change event handler.
$("#getCusineType").change(function() {
alert($(this).val());
})
console.log("Value is: "+$('#getCusineType').val());
console.log("Text is: "+$("#getCusineType option:selected").text());
$("select").click(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="getCusineType">
<option value="1">Indian</option>
<option value="2">American</option>
<option value="3">Italian</option>
<option value="4">General</option>
</select>

simply way to trigger the on change event
$(function(){
$("#getCusineType").on('change', function(){
alert($(this).val());
}).trigger('change');
});

Event listener inside a function

I have a select on my page:
<select id='cat'>
<option value='a'>A</option>
<option value='b'>B</option>
<option value='all'>all</option>
</select>
With a javascript function that handles which options have to be displayed:
function funcName(aList) {
// populates the options for the select tag
$("#cat").on("change", function(){
// some computation;
});
// uses aList to update some div data
}
What I'm trying to do is if the selected option is all, I have to display everything in aList, otherwise based on the selected option I have to display only the related options. Is my usage of onchange event correct?
Initially I thought of making aList global, but after some reading on globals in JS, I got to know it is not a very good practice.
Thanks in advance!
UPDATE: aList contains some string values.

$(function () {
$("#ddl").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).val();
var assignedRoleId = new Array();
alert("Selected Text: " + selectedText + " Value: " + selectedValue);
if(selectedValue== "all")
{
$("#ddl option").each(function()
{
if(this.value=="all")
{
assignedRoleId.push();
}
else
{
assignedRoleId.push(this.value);
assignedRoleId.push(" ");
$("#selected").html(assignedRoleId);
}
});
}
});
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Select something:
<select id="ddl">
<option value="">select one</option>
<option value="a">a</option>
<option value="b">b</option>
<option value="all">all</option>
</select>
<div id="selected">
</div>

trigger select box event using option text not option value in jquery

// In jquery
$('.check').val('two').trigger('change');
// and html is
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>
http://jsfiddle.net/v7QWd/353/
I need trigger the event using my text value i.e. "First" in jquery. Any solution of it? Here I have used .val('two') instead I wish to use "First"..

I think what you are trying to do is to select the option by its text, if so you can use :contains() - but it can give expected matches since it will use partial matches
So try
$(function() {
$('.check').change(function() {
var data = $(this).val();
snippet.log('data:' + data)
//if you want the selected text
var text = $(this).find('option:selected').text();
snippet.log('text:' + text)
});
$('.check option').filter(function() {
return $(this).text() == 'Second'
}).prop('selected', true)
$('.check').trigger('change');
});
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>

if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
$(function () {
//change to two ? how?
$('.check').change(function () {
var data = $(this).val();
alert(data);
});
if ($('.check option:selected').text() == "First") {
$('.check').trigger('change');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="check">
<option value="one">First</option>
<option value="two">Second</option>
</select>

Use .text() to get the selected option text and .change() to trigger initially on load
$('.check').change(function(){
var data= $(this).find("option:selected").text();
if(data == 'First'){
// your logic
}
}).change();
Fiddle

Find previous value of drop down list on change event [duplicate]

This question already has answers here:
get previous selected dropdown item
(2 answers)
Closed 9 years ago.
I have drop down list declared like :
<asp:DropDownList ID="myDropDown" width="300" CssClass="textboxda"
AutoPostBack="True" runat="server" onmousewheel="return false;" />
Drop down list change method
myDropDown.Attributes.Add("OnChange", "return OnChange();");
function OnChange()
{
var $j = jQuery.noConflict();
var sel = $j(this).prevAll("#myDropDown:first"),
val = sel.val(),
text = sel.find(':selected').text();
alert(text);
}
I am populating this drop down dynamically.
I am fetching the last/previously selected text of the drop down, but this is not working.
Please suggest.

myDropDown.Attributes.Add("OnChange", "return OnChange(this);");
after that you can put another attribute for current selected item
myDropDown.Attributes.Add("previous", "your default selected value");
after that your function like this
function OnChange(args)
{
var previousVal=$(args).attr('previous');
var newVal=$(args).find(':selected');
alert(previousVal);
alert(newVal);
$(args).attr('previous',newVal);
}

<select id="countries">
<option value="">Select country</option>
<option value="68">Russia</option>
<option value="20">United States</option>
<option value="73">Albania</option>
<option value="143">Algeria</option>
</select>
<script type="text/javascript">
$(document).ready(function(){
$('#countries').on('change', function() {
var $selected = $(this).find(':selected');
console.log('Prev = ', $selected.prev().text());
console.log('Next = ', $selected.next().text());
console.log('Last = ', $(this).find('option:last').text());
});
});
</script>
http://jsfiddle.net/S85rY/2/

try this
<select id="countries" previous="" onchange="countrychange(this)">
<option value="">Select country</option>
<option value="68">Russia</option>
<option value="20">United States</option>
<option value="73">Albania</option>
<option value="143">Algeria</option>
</select>
<script type="text/javascript">
function countrychange(args){
var previousVal=$(args).attr('previous');
var newVal=$(args).find(':selected');
alert(previousVal);
alert(newVal);
$(args).attr('previous',newVal);
}
</script>

You want jquery? DEMO http://jsfiddle.net/yeyene/3vRs9/
JQUERY
$(document).ready(function() {
$("#mySelect").on('change', function() {
alert('Changed selected: '+$('#mySelect option:selected').val());
});
});

How to get different selected values in javascript?

Hello everyone how can I get two values from different select boxes? I get first value in my select box but I can't get the second value from another select box.Here is my javascript code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var select = document.forms[0].sel;
var select2=document.forms[0].sel2;
select.onchange = function () {
var value = select.options[select.selectedIndex].value; // to get Value
alert(value);
}
select2.onchange = function () {
var value2 = select2.options[select2.selectedIndex].value; // to get Value
alert(value2);
}
});
</script>
<form>
<SELECT NAME="sel" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>
<form>
<SELECT NAME="sel2" onChange="split(selected value)">
<OPTION VALUE=1>Milk</option>
<OPTION VALUE=2>tea</option>
<OPTION VALUE=3>water</option>
<OPTION VALUE=4>coffee</option>
</SELECT>
</form>

The second select box is in the second form. So:
var select2 = document.forms[1].sel2;
That said, you can actually use jQuery for these things:
// bind a change event handler to the second select
$("select").eq(1).on("change", function() {
alert( $(this).val() );
});

jQuery Tip - Getting Select List Values
var foo = [];
$('#multiple :selected').each(function(i, selected){
foo[i] = $(selected).text();
});

$(document).ready(function () {
$('#sel').change(function(){ $('#sel option:selected').val(); });
give id to your select control
<SELECT id="sel">

with help of jQuery ( i suggest the logic, not the solution )
$(document).on('change', 'select', function(){
var selecetdOption = $(this).val();
alert(selecetdOption );
});​
Working Demo

You have wrong into your javascript because you have put
var select2=document.forms[0].sel2;
try to put
var select2=document.forms[1].sel2;
and it works!