Question

我开发了两个选择框 - 一个控制另一个框的可见性。 在页面加载 受控选择框(#select02)完全符合我的要求，只要我不显示/隐藏通过选择控制选择框(#select02)中的选项，选择问题(select01)中的选项。

一旦我这样做 - 受控选择框(#select02)中的所有功能都将停止运作。

所以我的问题是 - 如何保持 “受控” 选择框(#select02)的功能，显示后的功能/隐藏它？

Here's the fiddle

对于那些喜欢强制性实时代码的人.... HTML：

<div>
<h1>The controlling box</h1>
<p>(play with this second)</p>
    <select id = "select01" size = 2>
        <option value="value01">Hide Other Div</option>
        <option value="value02">Show Other Div</option>
    </select>
</div><!--end section-->

<div id = "slide">
<h1>The controlled box</h1>
<p>(play with this first)</p>
    <select size = "4" id = "select02" class = "moduleSelect" multiple>
        <option class = "module 30" value = "2">OptionA</option>
        <option class = "module 30" value = "2">OptionB</option>
        <option class = "module 15" value = "1">OptionC</option>
        <option class = "module 15" value = "1">OptionD</option>
    </select>

<div id = "hidden">
    <b><i class = "hiddenHeader">You have chosen:</i><p id = "userChoice"></p></b>
    <b><i class = "hiddenHeader">This Total:</i><p id = "Tot"></p></b>
     <p id = "Status"></p>
     <a href="javascript:void(0)" id="remove" class = "remove"><p>RESELECT</p></a>
</div><!--END #HIDDEN01-->
</div><!--END #SLIDE-->

剧本：

$(document).ready(function(){

//TURN OFF ALL SELECTIONS IN THE OPTIONS (NO ISSUE IT SEEMS)
$("option:selected").removeAttr("selected");
$(".moduleSelect").prop("disabled", false);  
$(".module").prop("disabled", false); 

//DECLARE THE SELECT TOTAL VARIABLE
var Total = 0;

//THE HIDE FUNCTIONALITY EXECUTED BY THE "CONTROLLING" SELECT BOX 
//(OSTENSIBLY THE ISSUE, IT SEEMS)

if($('#select01').val() == 'value01'){
    $('#slide').slideUp('slow', 'swing');
}

$('#select01').change(function(){
    if($(this).val() == 'value02'){
        $('#slide').slideDown('slow', 'swing');
        return true;
    }
    $('#slide').slideUp('slow', 'swing');
});

//THE USER FEEDBACK FUNTIONALITY PROVIDED BY THE "CONTROLLED" SELECT BOX 
//(NO ISSUE, IT SEEMS)

    //WHEN A USER CLICKS ON ANY OPTION
    $("#select02").change(function(){

        //TOGGLE MULTIPLE SELECTION
         $("#select02 option").click(function(){
            $(this).toggleClass("selected");
        });

         if (Total <30){

                    if ($("option:selected").val() == "0"){
                        Total += 0;
                    }
                    else if ($("option:selected").val() == "1"){
                        Total += 15;
                    }
                    else if ($("option:selected").val() == "2"){
                        Total += 30;
                    }
                    else if ($("option:selected").val() == ""){
                        Total = 0;
                    }

                    if (Total == 30){
                        $(this).prop("disabled", true);  
                        $("#Tot").text(Total);
                        $("#Status").html("<i>(You have selected the maximum required number of  Credits)</i>");
                        $("#hidden").css('display', 'block');
                        $("#userChoice").append("<li>" + $("option:selected", this).text() + "</li>");
                    }

                    if (Total == 15){
                        $(this).children(".30").prop("disabled", true);
                        $("#Tot").text(Total);
                        $("#Status").text("Select another 15 credits");
                        $("#hidden").css('display', 'block');
                        $("#userChoice").append("<li>" + $("option:selected", this).text() + "</li>");
                    }

            }else{
                $("#Status").text("You have already selected the required number of  Credits");
            }
        });

// THE RESELECT FUNCTION TO CLEAR 
//(NO ISSUE, IT SEEMS)

    $("div a#remove").click(function () {     
        $("#select02 option:selected").removeAttr("selected");
        $("#select02").prop("disabled", false);  
        $("#select02").children(".30").prop("disabled", false);
        $("#hidden").css('display', 'none');
        $("#userChoice").empty();
        $("#Tot").empty();
        $("#Status").empty();
    Total = 0;
    });     
});

请记住，我是自学成才的网络开发人员，总的菜鸟，并且可能做一些根本错误的事情！ :)也请原谅我糟糕的糟糕编程.....

提前感谢那些热心的问题解决者。 CollyG

Answer 1

我有updated the fiddle。基本上，以下代码中存在问题：

$("select").change(function(){
    $("option:selected").val();
});

此代码获取文档中第一个选定选项的值。这解释了为什么当您从第一个选择中选择某些内容时，第二个选择的代码不起作用。

话虽如此，更好的解决方案是在用户选择或取消选择选项时重新计算总数。使用jQuery.val()返回所选选项的数组。所以我们有：

$("#select02").change(function() { var Total = 0; $.each($(this).val(), function(_, value) { if (value === "1") { Total += 15; } else if (value === "2") { Total += 30; } }); });

获得总额后，您可以更新显示。

jQuery显示/隐藏影响兄弟选择框功能

1 个答案: