0

Really hoping you guys can help! I'm pulling my hair out here! So I created a jquery script to show certain fields based on what was selected in a select box. What's killing me is when I test it in jsFiddle, it works great, but when I test on our website, it doesn't work... what am I missing?

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();

    }
});

Link to jsFiddle http://jsfiddle.net/rasreye/duUrZ/

Hope you guys can help!

4

2 回答 2

3

我相信问题在于您没有等到页面加载后才执行此代码。

像这样简单地包装你的 JavaScript 就可以了。

我将您的 if 更改为 if/else 并进行了一些其他优化

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();

    }
  });

});

于 2013-06-13T16:53:10.397 回答
1

将 Javascript 包装在$(document).ready(). 在没有准备好的包装器的站点上,您尝试在元素呈现并准备好使用之前访问它。

它在 jsFiddle 上工作的原因是因为您将它设置为 run 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();

        }
    });
});
于 2013-06-13T16:51:15.380 回答