I have a multiple select list. on select for an option from the list,I am calling a javascript function. I want to pass the current selected option object to this javascript function.
How can I do this? I tried following but its not working.
<select onClick="callJavascriptFun(this.option);" >
</select>
for getting the selected option, try the following code:
<select onchange="callJavascriptFun(this.options[this.selectedIndex]);" >
</select>
inside the callJavascriptFun function you will get of course the selected option.
Make it easier with event handler:
html part
<select class="list">
</select>
js part:
$('select.list').change(function(){
var selectedOption = $('option:selected', $(this)); // your selected option object(element)
var current = $(this).val(); // your selected option value
....
});
Related
I have a drop down list (DDL)...
I would usually just use $('#ddl option:selected').val()
but I have stored the jQuery object...
var myDDL = $('#ddl');
I can't figure out how I would use the variable myDDL alongside with option:selected
Not sure how to word my question really...
You simply need to call val() on the select object to get the selected value.
$('#ddl').val()
To get the variable just for the sake of knowing you can use find
selectedVal = myDDL.find('option:selected').val();
The .val() method is primarily used to get the values of form elements
such as input, select and textarea. In the case of select elements, it
returns null when no option is selected and an array containing the
value of each selected option when there is at least one and it is
possible to select more because the multiple attribute is present, jQuery Docs
Please try this.
Call this below function to see the effects.
----------------------- JS-Code -----------------------
TestFunction();
function TestFunction() {
var myDDL = $('#ddl');
var selectedVal = myDDL.find('option:selected').val();
alert(selectedVal);
}
-------------------- HTML Code --------------------------
<div id="divTest">
<select id="ddl">
<option>one</option>
<option selected="selected">two</option>
</select>
</div>
HTML:
<select id="ddlCountry" name="ddlCountry">
<option selected="selected" value="1">India
</option>
<option value="2">USA
</option>
</select>
JQuery:
$('#ddlCountry').val()
I hope this helps. If this does resolve your problem, please mark the post as answered.
Thanks,
Prashant
Try with this:
myDDL.find('option:selected').val();
As myDDL is a jQuery object, so you can use .find() method to get the selected value.
I have a form with a simple drop-down menu when the user selects any of the options, i want to be able to pass that selected value to a JavaScript function
Once the user clicks on an option it will alert the value in the jQuery change function but I want to use the value that was passed through in other functions but it does not get the value for some reason
function getTweet(){
$('#test').change(function() {
var value = $('#test :selected').val();
});
}
want to use the value outside of the change function but it does not grab it
<form>
<select id="test">
<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>
</select>
</form>
If you want to use the most current value of the drop-down anywhere in your code, you can just reference it like this:
$('#test').val()
I've removed the :selected, because that's not necessary; .val() will give the right value.
You might use custom events to do something based on that event?
Example:
$('#test').change(function () {
$('mysubscriberselectorshere').trigger('gettweet');
});
// do something based on the custom event
$('mysubscriberselectorshere').on('gettweet', function {
// do good stuff here
alert($('#test').val());
});
I'm using Chosen Multiple Select
What I want to do is that if user selects any option I want that value and then I will do some functionality depending on that value.
In chosen without multiple select i can get selected value by using foll. code
$(".selectId").chosen().change(function(){
selectedValue = $(this).find("option:selected").val();
});
But in multiple select I get the first selected value again n again
can anybody help me by finding the current selected value in multiple select element??
The Chosen documentation mentions parameters for getting the most recently changed variables.
Chosen triggers the standard DOM event whenever a selection is made
(it also sends a selected or deselected parameter that tells you
which option was changed).
So, if you just want the most recent option selected or deselected:
$(".selectId").chosen().change(function(e, params){
// params.selected and params.deselected will now contain the values of the
// or deselected elements.
});
Otherwise if you want the whole array to work with you can use:
$(".selectId").chosen().change(function(e, params){
values = $(".selectId").chosen().val();
//values is an array containing all the results.
});
Short answer:
You just do this: var myValues = $('#my-select').chosen().val();
Full example:
If you have a select-multiple like this:
<select id="my-select" class="chzn-select" multiple data-placeholder="Choose one or more values...">
<option value="value1">option1</option>
<option value="value2">option2</option>
<option value="value3">option3</option>
</select>
You can get the selected values in an array to doing the following:
// first initialize the Chosen select
$('#my-select').chosen();
// then, declare how you handle the change event
$('#my-select').chosen().change(function(){
var myValues = $('#my-select').chosen().val();
// then do stuff with the array
...
});
your code is gettin the correct selected value.. but since its multiple you need to use loop..or use map to get the selected value and push it into array..
try this
$(".selectId").chosen().change(function(){
var selectedValue = $.map( $(this).find("option:selected").val(), function(n){
return this.value;
});
console.log(selectedValue ); //this will print array in console.
alert(seletedValue.join(',')); //this will alert all values ,comma seperated
});
updated
if you are getting commaseperated values then use split()
var values= $(".selectId").val();
$.each(values.split(',').function(i,v){
alert(v); //will alert each value
//do your stuff
}
try this
$('.selectId:selected').each(function(i, selected) {
var value = $(selected).val();
var text = $(selected).text();
});
The Chosen documentation mentions parameters for getting the most recently changed variables.
$(".CSS Selector").chosen().change(function(e, parameters) {
// params.selected and params.deselected will now contain the values of the
// or deselected elements.
});
This is how I've got it to work. In my html, I've this
<select data-placeholder="Choose a Country..." class="form-control chosen-select" multiple tabindex="4">
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="CHINA">CHINA</option>
</select>
Then javascript
// apply chosen-js to the DOM, and store it in a variable.
var chosen = $(".chosen-select").chosen({
no_results_text: "Oops, nothing found!"
});
// inside the change event, we get the value by calling chosen.val()
chosen.change(function() {
console.log('selected tags are', chosen.val());
});
I am trying to build a form that fills in a person's order.
<form name="food_select">
<select name="maincourse" onchange="firstStep(this)">
<option>- select -</option>
<option text="breakfast">breakfast</option>
<option text="lunch">lunch</option>
<option text="dinner">dinner</option>
</select>
</form>
What I'm trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag.
function firstStep(element) {
//Grab information from input element object
/and place them in local variables
var select_name = element.name;
var option_value = element.value;
}
I can get the name and the option value, but I can't seem to get the text="" or the value="" from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn't help
var option_user_selection = element.options[ whatever they select ].text
I also need to use the passed in select reference as that is how it's set up in the rest of my code.
Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically.
You can use:
var option_user_selection = element.options[ element.selectedIndex ].text
In jquery you could try this $("#select_id>option:selected").text()
var option_user_selection = document.getElementById("maincourse").options[document.getElementById("maincourse").selectedIndex ].text
form.MySelect.options[form.MySelect.selectedIndex].value
I have a select menu that looks like this:
<select id ="cal-category-select">
<option value="/event-sort/list/2009/9/sports/">Sports Events</option>
<option value="/event-sort/list/2009/9/fine-arts/">Fine Arts Events</option>
...
</select>
When the user selects an option from the select, I need to pass the option value attribute to this function as event data, it's the second parameter:
$('#cal-category-select').bind('change.filter', need_value_attribute_here, update_cal);
The update_cal function referenced receives the data passed in from the second parameter and using to get some ajax content.
Any idea how I can do that? I haven't been able to get it to work.
I have tried this:
var category_url = $('#cal-category-select option:selected').attr('value');
$('#cal-category-select').unbind().bind('change.filter', category_url, update_cal);
but that only returns the first option value in the list.
You would just use:
$("#cal-category-select").val()
alternative longer syntax:
$('#cal-category-select option:selected').val()
$('#cal-category-select').bind('change.filter', function(){
update_cal($(this).val());
});
For the selected <option> value, it should just be
$('#cal-category-select').val();