I am trying to get two parameters from dropdown list change event. Dropdown list uses chosen.js
First I would like to get a name of the dropdown list
Second I would like to get a value of an item that has been selected
I found this code in documentation:
$('.my_select_box').on('change', function(evt, params) {
do_something(evt, params);
});
but when I trigger it, params are undefined. Have been looking everywhere, but cannot find out how to do it. Can you help please?
With jQuery, use $(this).val() into your callback function, check the Fiddle :
<script>
$('.my_select_box').on('change', function(evt, params) {
// The name of your select
alert($(this).attr('name'));
// The value
alert($(this).val());
});
</script>
Then
<select name="my_drop_down" class="my_select_box">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
Related
So I am trying to get the user input(value) of this select option button. Everything I look at online dosen't really tell me how to get this button value so I can use it and manipulate it, please help
You need a click event listener for this.
This code snippet demonstrate what you need to do:
// Get Select List
var favAnimal = document.getElementById("favAnimal");
// Add event Listener for any change in the selection
favAnimal.addEventListener("change", function() {
if (favAnimal != undefined && favAnimal.value != "Choose"){
//Do actions on selected option
console.log(favAnimal.value)
}
});
<select id="favAnimal">
<option value="Choose">choose</option>
<option value="Lion">Lion</option>
<option value="Shark">Shark</option>
<option value="Eagle">Eagle</option>
</select>
Given a select with some options
<select id="favAnimal">
<option value="Choose">Choose</option>
<option value="lion">Lion</option>
...
</select>
To get the value of the select you do it like this
var favAnimal = document.getElementById("favAnimal");
console.log(favAnimal.value);
In my application I am using select2 plugin for drop-down with multiple select values. And now I want to add some static option to the select2 drop-down.
<select multiple="" class="test">
<option value="a">Illustrations</option>
<option value="b">Maps</option>
<option value="add">Add Status</option>
</select>
And I am applying multi select, now when I click on add status option I want to do some functionality and this option will not selected as like the option.
And my js code :
$('.test').select2();
$('.test').on("select2-selecting", function(e) {
alert($(".test").val());
});
But alert is giving all the selected values a,b,add. But I want to get the 'add' option only.
Please suggest me how can I do this.
Thanks in advance.
Try it with this:
alert($(".test option:selected").val());
Could it be? Or do you need to handle an event at the value 'add'?
$('.test').select2();
$('.test').on("select2:select", function(e) {
if( $('.test').val()[0] === "add" ) {alert("add")}
//or search value add
if($(".test").val().indexOf("add") > -1) {alert("search add")}
});
I am trying to make an Asp.Net Mvc Ajax project.I have to take the value of select-option in a loop with jquery.All select's ids are same , names are same when I try it takes the first select's value.btw I have tried all things in this title: jQuery Get Selected Option From Dropdown. Can you help me please?
#foreach (var item in Model)
{
<select id="selSaat">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
}
Heres some JS code that will give you the selections value if there is only 1 select element on your page and the options within it contain values on them:
document.getElementsByTagName('select')[0].onchange = function(){
alert(this.value);
};
Heres a working demo for ya:
http://codepen.io/nicholasabrams/pen/OVOPYK
Targeting a <select> with native browser javascript with the onchange method will return the value selected when it occurs via user interaction.
http://www.w3schools.com/jsref/event_onchange.asp
HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});
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();