javascript - jQuery 显示/隐藏影响同级选择框功能

Question

我开发了两个选择框 - 一个控制另一个的可见性。在页面加载时，受控选择框(#select02)的功能与我想要的完全一样，只要我通过选择控制选择框(select01)中的选项，不显示/隐藏相关选择框(#select02) .

一旦我这样做 - 受控选择框(#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;
    });     
});

请记住，我是自学成才的 Web 开发人员，完全是菜鸟，而且可能做了一些根本错误的事情! :)还请原谅我糟糕的编程......

提前感谢你们中那些热心的问题解决者。科利G

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

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