This one continues to throw me for a loop...only in Chrome is this happening.
I have an "upgrade page" where a user can click a plan and then go to a form. I pass the ?plan=# here and then make it select the option that fits. For some reason, in Chrome, it IS selecting it as it shows in inspect element...however, it does not display in the select box.
I am trying a bunch of different ways to make this work in chrome, with jquery, php, html, anything I can think of, but nothing seems to be working.
Here is the jquery code:
$(document).ready(function() {
var split = location.search.replace('?', '').split('=')
var getPlan = split[1];
console.log(getPlan);
if (getPlan == 1) {
$("#memberPlan").val('premium');
} else {
$("#memberPlan").val('vip');
}
function vip() {
var list = "";
list = "<option value=\"3\">VIP: per month ($9.00)</option>
";
list += "<option value=\"4\">VIP: every 6 months ($47.00)</option>
";
list += "<option value=\"5\">VIP: per year ($89.00)</option>
";
$("#service").html(list);
}
function premium() {
var list = "";
list = "<option value=\"0\">Premium: per month ($5.00)</option>
";
list += "<option value=\"1\">Premium: every 6 months ($27.00)</option>
";
list += "<option value=\"2\">Premium: per year ($49.00)</option>
";
$("#service").html(list);
}
var currentPlan = $("#currentPlan").text().toLowerCase();
$('#memberPlan').attr("value", currentPlan);
if ($("#memberPlan").val() == "premium") {
premium();
}
if ($("#memberPlan").val() == "vip") {
vip();
}
$("#memberPlan").change(function() {
if ($("#memberPlan option:selected").val() == 'vip'){
vip();
}
if ($("#memberPlan option:selected").val() == 'premium'){
premium();
}
});
});
and here is the html/php ($payPlan is $_GET['plan']):
<select name="member_plan" id="memberPlan">
<option value="premium"<?php echo $payPlan == 1 ? ' selected':''; ?>>Premium</option>
<option value="vip"<?php echo $payPlan == 2 ? ' selected':''; ?>>VIP</option>
</select>
Thanks in advance, any help is appreciated :)
Try this
$("#memberPlan").change(function() {
if ($(this).val() == 'vip'){
vip();
}
if ($(this).val() == 'premium'){
premium();
}
});
Sometimes I find the "on" handler binds to the element with more consistent behavior. Try?
$("#memberPlan").on('change', function() {
if ($(this).val() == 'vip'){
vip();
}
if ($(this).val() == 'premium'){
premium();
}
});