JQuery execute function when option is selected from option object
I am dynamically creating options for a select element using jQuery. Is it possible in jQuery to customize the function that will be executed when this option is selected?
I know I can detect that the entire select element has changed, but can I specify this for each option? Maybe something like this:
$('<option />').onselect(function(){
// do something
});
Edit: If it is not possible to specify a function to be executed when a specific option is selected, is it possible to bind a function to an element in jQuery? This would make my logic cleaner by allowing me to simply execute this function assigned to an option in the .change to select.
source to share
You can delegate the event change
to the document and attach an event handler to the element select
. This allows manipulation at runtime:
$(document).on('change', 'select', function() {
console.log($(this).val()); // the selected options’s value
// if you want to do stuff based on the OPTION element:
var opt = $(this).find('option:selected')[0];
// use switch or if/else etc.
});
Or, if you insist on creating functions for each OPTION, you can do:
$('<option>').data('onselect', function() {
alert('I’m selected');
});
$(document).on('change', 'select', function(e) {
var selected = $(this).find('option:selected'),
handler = selected.data('onselect');
if ( typeof handler == 'function' ) {
handler.call(selected, e);
}
});
source to share
You can use the onchange handler to select:
<select name='numbers' id='numbers'>
<option value='1' selected='selected'>One</option>
<option value='2'>two</option>
<option value='3'>three</option>
<option value='4'>four</option>
</select>
<script>
$('#numbers').change(function(){
if($(this).val() == 1){
function1();
}
if($(this).val() == 2){
function2();
}
});
</script>
Regards
source to share
What you can try is bind the event change()
to the element itself select
. From there, assuming you have a valid function for each parameter, you can call an individual callback:
$('select').change(function() {
var type = $(this).val();
switch(type) {
}
// Alternatively, you can try this as well:
$(this).find('option:selected').each(function() {
});
});
source to share
If you say you want to assign separate functions to each element of an option, you can do something like this:
var options = [{"value" : "1",
"display" : "One",
"fn" : function() { console.log("One clicked"); }
},
{"value" : "2",
"display" : "Two",
"fn" : function() { console.log($(this).val() + " clicked"); }
}];
var $select = $("select").on("change", function() {
var opt = this.options[this.selectedIndex];
$(opt).data("fn").call(opt);
});
$.each(options, function(i, val) {
$select.append(
$("<option/>").attr("value", val.value)
.text(val.display)
.data("fn", val.fn)
);
});
Demo: http://jsfiddle.net/6H6cu/
This actually adds functions to each option using jQuery method .data()
, and then when clicking / clicking on the select item, it calls the corresponding parameter function (setting the option this
to a parameter).
This is a way of overflowing in my opinion, but it seems to be what you are asking for.
I assume a simpler version would be something like this:
var optionFunctions = {
"1" : function() { ... },
"2" : function() { ... },
...
};
// code to create the options omitted
$("select").on("change", function() {
var fn = optionFunctions[$(this).val()];
if (fn)
fn.call(this.options[this.selectedIndex]);
});
source to share