真的希望你们能帮忙!我把头发拉到这里!所以我创建了一个jquery脚本,根据选择框中选择的内容显示某些字段。杀死我的是当我在jsFiddle中测试它时,效果很好,但是当我在我们的网站上测试时,它不起作用......我错过了什么?
HTML
<form action="http://www.mobileassistant.us/store/cart.php" method="post" name="registerform" onsubmit="return validation_free();">
<div style="display: none;"><input type="hidden" name="productid" value="16138" />
<input type="hidden" name="mode" value="add" />
<input type="hidden" name="act" value="register" />
<input type="hidden" name="title" value="-" />
<input type="hidden" name="b_address" value="-" />
<input type="hidden" name="b_city" value="-" /><input type="hidden" name="b_state" value="NY" /><input type="hidden" name="b_country" value="US" />
<input type="hidden" name="b_zipcode" value="11111" />
<input type="hidden" name="usertype" value="C" /></div>
<input class="span6" id="firstname" type="text" name="firstname" placeholder="First Name" /> <input class="span6" id="lastname" type="text" name="lastname" placeholder="Last Name" /> <input class="span6" id="phone" type="text" name="phone" placeholder="Mobile Phone" /> <input class="span6" id="email" type="text" name="email" placeholder="Email" />
<select class="span12" id="additional_values_5" name="additional_values[5]"><option value="N/A">CRM (Optional)</option><option value="LexisNexis InterAction">LexisNexis InterAction</option><option value="EBIX Smartoffice">EBIX Smartoffice</option><option value="Advisors Assistant">Advisors Assistant</option><option value="Redtail">Redtail</option><option value="Pareto Platform">Pareto Platform</option></select><input class="span6" id="additional_values_6" style="display: none;" type="text" name="additional_values[6]" placeholder="Interaction User ID" size="32" value="" /> <input class="span6" id="additional_values_7" style="display: none;" type="text" name="additional_values[7]" placeholder="Activity Type" size="32" value="" /> <input class="span6" id="additional_values_10" style="display: none;" type="text" name="additional_values[10]" placeholder="Office" size="32" value="" /> <input class="span6" id="additional_values_11" style="display: none;" type="text" name="additional_values[11]" placeholder="Username" size="32" value="" /> <input class="span11" id="additional_values_12" style="display: none;" type="text" name="additional_values[12]" placeholder="Your Outlook Email Address" size="32" value="" /> <input class="span6" id="additional_values_15" style="display: none;" type="text" name="additional_values[15]" placeholder="Redtail Username" size="32" value="" /> <input class="span6" id="additional_values_16" style="display: none;" type="text" name="additional_values[16]" placeholder="Redtail Password" size="32" value="" /> <input class="span6" id="uname" type="text" name="uname" placeholder="Create a Username" /> <input class="span6" id="passwd1" type="password" name="passwd1" placeholder="Create a Password" />
<button class="btn btn-large btn-info" type="submit">Start My Free Trial</button>
</form>
的Javascript
var Privileges = jQuery('#additional_values_5');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'N/A') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'LexisNexis InterAction') {
$('#additional_values_6').show();
$('#additional_values_7').show();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'EBIX Smartoffice') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').show();
$('#additional_values_11').show();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'Advisors Assistant') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').show();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'Redtail') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').show();
$('#additional_values_16').show();
}
if ($(this).val() == 'Pareto Platform') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
});
链接到jsFiddle http://jsfiddle.net/rasreye/duUrZ/
希望你们能帮忙!
答案 0 :(得分:2)
我认为问题在于您不会等到页面加载后才能执行此代码。
只需将这样的JavaScript包装起来就可以了。
我将你的if改为if / else's并做了一些其他的优化
jQuery(function($) {
$('#additional_values_5').change(function () {
var val = $(this).val();
if (val === 'N/A') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
else if (val === 'LexisNexis InterAction') {
$('#additional_values_6').show();
$('#additional_values_7').show();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
else if (val === 'EBIX Smartoffice') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').show();
$('#additional_values_11').show();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
else if (val === 'Advisors Assistant') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').show();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
else if (val === 'Redtail') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').show();
$('#additional_values_16').show();
}
else if (val === 'Pareto Platform') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
});
});
答案 1 :(得分:1)
在$(document).ready()
中包装Javascript。在没有现成包装器的站点上,您尝试在呈现并准备使用之前访问该元素。
它在jsFiddle上工作的原因是因为你将它设置为运行onDomReady
,它会自动添加准备好的包装器。
$(document).ready(function(){
var Privileges = jQuery('#additional_values_5');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'N/A') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'LexisNexis InterAction') {
$('#additional_values_6').show();
$('#additional_values_7').show();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'EBIX Smartoffice') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').show();
$('#additional_values_11').show();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'Advisors Assistant') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').show();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
if ($(this).val() == 'Redtail') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').show();
$('#additional_values_16').show();
}
if ($(this).val() == 'Pareto Platform') {
$('#additional_values_6').hide();
$('#additional_values_7').hide();
$('#additional_values_10').hide();
$('#additional_values_11').hide();
$('#additional_values_12').hide();
$('#additional_values_15').hide();
$('#additional_values_16').hide();
}
});
});