jQuery根据选择框隐藏显示字段

时间:2013-06-13 16:47:29

标签: jquery

真的希望你们能帮忙!我把头发拉到这里!所以我创建了一个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/

希望你们能帮忙!

2 个答案:

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

        }
    });
});