I'm trying to implement a dependency between two different select boxes. While using the following jQuery code, most normal browsers would work perfectly (Chrome/FF) but IE/Edge/Some Mobile browsers won't be affected by the code.
jQuery(document).ready(function($){
$("#selectbox-dependency").change(function() {
if ($(this).val() == "Banana") { //value of selectbox #1
$(".yellow").show(); //classes for each of the options in selectbox #2
$(".red").hide();
$(".black").hide();
$(".gold").hide();
}else if ($(this).val() == "cherry"){
$(".yellow").hide();
$(".red").show();
$(".black").hide();
$(".gold").hide();
}
});
});
Thanks!
It might be a problem with val() on mobile. See if this answer is getting you sorted:
http://stackoverflow.com/questions/4709093/jquery-mobile-val-not-working
The core issue was that hiding (.hide() ) the options didn't work for IE and many mobile browsers. I ended up using this customization: (Not 100% optimal, but good enough, and works on all browsers)
jQuery(document).ready(function($){
$("#selectbox-dependency").change(function() {
if ($(this).val() == "Banana") { //value of selectbox #1
$(".yellow").prop('disabled', false); //classes for each of the options in selectbox #2
$(".red").prop('disabled', true);
$(".black").prop('disabled', true);
$(".gold").prop('disabled', true);
}else if ($(this).val() == "cherry"){
$(".yellow").prop('disabled', true);
$(".red").prop('disabled', false);
$(".black").prop('disabled', true);
$(".gold").prop('disabled', true);
}
});
});
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.