更改下拉值时DIV“隐藏”答案

【问题标题】：DIV "hiding" when changing dropdown value更改下拉值时DIV“隐藏”
【发布时间】：2013-07-24 06:48:24
【问题描述】：

这与我之前提出的一个问题有关：Hide / Show Multiple Divs

我的上一个问题中的代码已经到位，除了在选择票证“之后”更改下拉列表中的值之外，它似乎工作正常。

我有许多 Javascrpts，所以想知道某处是否存在冲突？第一段代码在文档的 HEAD 中。

<head>
    <script type="text/javascript">
        $(function() {
            $('.cat_dropdown').change(function() {
                $('#payMethod').toggle($(this).val() >= 2);
            });
        });     
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".paymentmethod").click(function () {
                $(".paymentinfo").hide();
                switch ($(this).val()) {
                    case "Credit Card Authorisation":
                        $("#pay0").show("slow");
                        break;
                    case "Direct Deposit":
                        $("#pay1").show("slow");
                        break;
                    case "Cash Payment (FAA Office)":
                        $("#pay2").show("slow");
                        break;
                }
            });
        });
    </script>
</head>

第二段代码是表单验证：

        <script src="/CatalystScripts/ValidationFunctions.js" type="text/javascript"></script>
        <script type="text/javascript">
            //<![CDATA[
            var submitcount27389 = 0;function checkWholeForm27389(theForm){
            var why = "";
            if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name"); 
            if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
            if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address"); 
            if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City"); 
            if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State"); 
            if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode"); 
            if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country"); 
            if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value); 
            if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number"); 
            if (theForm.CAT_Custom_266106) why += checkDropdown(theForm.CAT_Custom_266106.value, "Available Dates:");
            if (theForm.CAT_Custom_266143) why += checkDropdown(theForm.CAT_Custom_266143.value, "Member Tickets:");
            if (theForm.CAT_Custom_266107) why += checkDropdown(theForm.CAT_Custom_266107.value, "Guest Tickets:");
            if (theForm.CAT_Custom_266105 && theForm.CAT_Custom_266107.value != "1") 
                why += checkSelected(theForm.CAT_Custom_266105, "Payment Options:");
            if (theForm.CAT_Custom_266104) why += checkDropdown(theForm.CAT_Custom_266104.value, "Where did you hear about us?");
            if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image"); if(why != ""){
                alert(why);
                return false;
            }
            if(submitcount27389 == 0){
                submitcount27389++;
                theForm.submit();
                return false;
            }else{
                alert("Form submission is in progress.");
                return false;
            }
            }
            //]]>
        </script>
    </form>

如果您想对其进行测试并查看结果，可以在http://www.faa.net.au/test/femmes-event-rego-form.html 找到该页面。

您需要选择 1 位以上的 GUEST，然后选择 CREDIT CARD AUTHORIZATION，最后在“您从哪里听说我们？”中选择一些内容。下拉菜单看看会发生什么。

我不明白为什么在最后一个下拉菜单中更改值后 DIV 会隐藏？？

我添加了一个 JSFiddle - http://jsfiddle.net/4REan/ - 但我无法让它正常工作，但希望那里的所有代码都会有所帮助？？

【问题讨论】：

嘿伙计，你能为此创建一个jsfiddle吗，我纠正你的问题会容易得多。 jsfiddle.net
如果 im not wrong this should be the line which is causing that behaviour.if (theForm.CAT_Custom_266105 && theForm.CAT_Custom_266107.value != "1") 为什么 += checkSelected(theForm.CAT_Custom_266105, "Payment Options:");`。如果您可以在 jsfiddle 中发布此行为所需的所有相关代码，那么我将能够做一些事情
我会试试 JSFiddle。
@dreamweiver - 我似乎无法像在我的网站上那样让它在 JSFiddle 上运行？如上所示，表单验证使用的是 Javascript，但我认为我没有正确输入此 JSFiddle。如果你能看一下那就太好了 - jsfiddle.net/4REan 另外，我添加了 2 个外部资源来节省我查找所有 CSS 的时间。
我已经纠正了你的问题，你在一般情况下切换“支付方式”div，因为它被要求以 thr 形式进行所有下拉更改，截至目前我已经修改它只发生在适当的下拉.这里是 jsfiddle，jsfiddle.net/4REan/1/.let我知道一切是否正常

标签： javascript html css forms business-catalyst

【解决方案1】：

支付方式（div）切换功能有一点点错误。我已经纠正了它，它的工作正常这里是修改后的js代码

JS 代码：

$(function () {
// $('.cat_dropdown').change(function () { //Commented as it was generic call
$('#CAT_Custom_266107').change(function () { //added for specific call
    alert($(this).val());
    $('#payMethod').toggle($(this).val() >= 2);
});
});

 $(document).ready(function () {
  $(".paymentmethod").click(function () {
    $(".paymentinfo").hide();
    switch ($(this).val()) {
        case "Credit Card Authorisation":
            $("#pay0").show("slow");
            break;
        case "Direct Deposit":
            $("#pay1").show("slow");
            break;
        case "Cash Payment (FAA Office)":
            $("#pay2").show("slow");
            break;
      }
     });
    });

$(document).ready(function () {

var submitcount27389 = 0;

function checkWholeForm27389(theForm) {

    var why = "";
    if (theForm.FirstName) why += isEmpty(theForm.FirstName.value, "First Name");
    if (theForm.LastName) why += isEmpty(theForm.LastName.value, "Last Name");
    if (theForm.HomeAddress) why += isEmpty(theForm.HomeAddress.value, "Home Address");
    if (theForm.HomeCity) why += isEmpty(theForm.HomeCity.value, "Home City");
    if (theForm.HomeState) why += isEmpty(theForm.HomeState.value, "Home State");
    if (theForm.HomeZip) why += isEmpty(theForm.HomeZip.value, "Home Zipcode");
    if (theForm.HomeCountry) why += checkDropdown(theForm.HomeCountry.value, "Home Country");
    if (theForm.EmailAddress) why += checkEmail(theForm.EmailAddress.value);
    if (theForm.HomePhone) why += isEmpty(theForm.HomePhone.value, "Home Phone Number");
    if (theForm.CAT_Custom_266106) why += checkDropdown(theForm.CAT_Custom_266106.value, "Available Dates:");
    if (theForm.CAT_Custom_266143) why += checkDropdown(theForm.CAT_Custom_266143.value, "Member Tickets:");
    if (theForm.CAT_Custom_266107) why += checkDropdown(theForm.CAT_Custom_266107.value, "Guest Tickets:");
    if (theForm.CAT_Custom_266105 && theForm.CAT_Custom_266107.value != "1") why += checkSelected(theForm.CAT_Custom_266105, "Payment Options:");
    if (theForm.CAT_Custom_266104) {

        why += checkDropdown(theForm.CAT_Custom_266104.value, "Where did you hear about us?");

    }
    if (theForm.CaptchaV2) why += captchaIsInvalid(theForm, "Enter Word Verification in box below", "Please enter the correct Word Verification as seen in the image");
    if (why != "") {
        alert(why);
        return false;
    }
    if (submitcount27389 == 0) {
        submitcount27389++;
        theForm.submit();
        return false;
    } else {
        alert("Form submission is in progress.");
        return false;
    }
}
 });

这是 LIVE DEMO

的 js fiddle

我想建议你一件事，无论你想通过 jQuery 做什么功能，将它们添加到单个 "$(document).ready(function () { .... } ); "或 "$(function () { ...} );" （两种语法都是有效的），因为我在你的代码中观察到你已经多次添加了这个，这对浏览器来说并不重要，因为它会在正文加载时执行所有内容。但这是编码的坏习惯，因为它会增加 LOC 及其冗余代码。下次一定要避免。

快乐编码:)

【讨论】：