jQuery - apply function to multiple select elements with same class name
Question
This is what I have so far:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<title>
Select
</title>
</head>
<body>
<script type="text/javascript">
var MyArray = {
"Windows": "imgx.jpg",
"Linux": "imgt.jpg",
"Mac": "imgi.jpg",
"MS DOS": "imgy.jpg",
"1GB": "imggb.jpg"
}
jQuery(function() {
jQuery('.product').change(function() {
var xkey = MyArray[jQuery.trim(jQuery(".product option:selected").text())];
if (typeof xkey == 'string') {
alert(xkey);
}
});
});
</script>
<div>
<select name="options_random_nr_yy" class="product">
<option value="">
-- Select --
</option>
<option value="56">
1GB
</option>
<option value="57">
2GB
</option>
<option value="73">
4GB
</option>
<option value="209">
8GB
</option>
</select>
</div>
<div>
<select name="options_random_nr_xx" class="product">
<option value="">
-- Select --
</option>
<option value="63">
Windows
</option>
<option value="65">
Linux
</option>
<option value="67">
Mac
</option>
<option value="89">
MS DOS
</option>
</select>
</div>
</body>
</html>
The problem is that it always return "undefined" when I select an option. However, if I remove one of the <select> elements, it works fine!
How can I apply the same function to all <select> elements with same class name (in this example the common class is "product")?
4 answers
solution1
1 2013-01-15 20:01:49
Instead of
var xkey = MyArray[jQuery.trim(jQuery(".product option:selected").text())];
try
var xkey = MyArray[jQuery.trim(jQuery(this).val())];
in event handlers this always points to an element where even happened.
UPD :
I see your MyArray have option text instead option value as a key, so you should use:
var xkey = MyArray[jQuery.trim(jQuery(this).find("option:selected").text())];
solution2
1 ACCPTED 2013-01-15 20:05:27
Your problem is that jQuery('.product') returns a list of all of the selects, rather then the one that is currently selected. Most modern browsers handle the conversion from list of one DomElement to a particular DomElement (thus if you remove one it suddenly works), however, within event handlers, you can use $(this) to work for one option in old browsers and for multiple items in all browsers.
($ is shorthand for jQuery)
So what you want to do is:
$(function(){
$('.product').change(function(){
var xkey = MyArray[$.trim($(this).find("option:selected").text())];
}
if (typeof xkey == 'string') {
alert(xkey);
}
}
solution3
1 2013-01-15 20:08:41
You need to bind your event to each element. Search the array with jQuery.inArray . Clean solution:
jQuery(function() {
jQuery('.product').change(function() {
var xkey = jQuery.trim(jQuery(this).find('option:selected').text())
if(jQuery.inArray(xkey, MyArray) && typeof xkey == 'string')
alert(xkey);
})
});
solution4
1 2013-01-15 20:19:54
Do this way using .each() :-
var MyArray = {
"Windows": "imgx.jpg",
"Linux": "imgt.jpg",
"Mac": "imgi.jpg",
"MS DOS": "imgy.jpg",
"1GB": "imggb.jpg"
};
jQuery('.product').change(function() {
jQuery(".product option:selected").each(function() {
var xkey = MyArray[jQuery.trim(jQuery(this).text())];
if (typeof xkey == 'string') {
alert(xkey);
}
});
});
Refer LIVE DEMO
Other way of doing this using .map()
jQuery('.product').change(function() {
$(".product option:selected").map(function(){
var xkey = MyArray[jQuery.trim(jQuery(this).text())];
if (typeof xkey == 'string') {
alert(xkey);
}
});
});
Refer LIVE DEMO - Using map()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.