javascript – 使用jQuery复选框选择的MultiSelect下拉列表

我正在尝试使用jQuery手动创建一个带有多选复选框的下拉列表.

我不想使用除jQuery之外的任何内置库.我尝试实现功能,但问题是,当我选中复选框时,数据将弹出输入字段,如果我第二次点击,我可以看到复选框未选中,数据不会附加到上一个.

请告诉我代码中哪里出错了.

<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8" />
<title>Untitled Document</title>
<style>
    .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        font-weight: bold;
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #presentationTable {
        display: none;
        border: 1px #dadada solid;
    }
    #presentationTable label {
        display: block;
    }
    #presentationTable label:hover {
        background-color: #1e90ff;
    }
</style>

</head>

<body>
<form>
    <div class="multiselect">
        <div class="selectBox" onClick="showCheckBoxes()">
            <input type="text" id="presentatioonTableimputValue"><img src="http://siged.sep.gob.mx/analytics/res/s_blafp/uicomponents/obips.CommonIconSets/dropdownfilled_en_choicelistmulti.png" />
            <div class="overSelect"></div>
        </div>
        <div id="presentationTable"> </div>
    </div>
</form>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
    var expanded = false;
    function showCheckBoxes()
    {
        var abc = '<label><input type="checkBox" id="one" value="1"/>First1 checkBox</label> <label><input type="checkBox" id="two" value="two"/>Second checkBox </label> <label><input type="checkBox" id="three" value="three"/>Third checkBox</label>';
        $('#presentationTable').html(abc);
                if (!expanded) {
                    $('#presentationTable').show();
                    expanded = true;
                } else {
                    $('#presentationTable').hide();           
                    expanded = false;
                }       
    } 


    function updateTextArea() 
    {
        var allVals = [];
        $('#presentationTable :checked').each(function () {
            allVals.push($(this).val());
        });
        $('#presentatioonTableimputValue').val(allVals);
    }

    $(document).click(function(event){
        var $trigger = $(".multiselect");
        if($trigger !== event.target && !$trigger.has(event.target).length){
            $("#presentationTable").slideUp("fast");

             updateTextArea();
        }           
    });           
</script>
</body>
</html>

解决方法:

试试这个：

var expanded = false;
populateCheckBox();
function populateCheckBox(){
    var abc = '<label><input type="checkBox" id="one" value="1"/>First1   checkBox</label> <label><input type="checkBox" id="two" value="two"/>Second checkBox </label> <label><input type="checkBox" id="three" value="three"/>Third checkBox</label>';
    $('#presentationTable').html(abc);
}
function showCheckBoxes()
 {

            if (!expanded) {
                $('#presentationTable').show();
                expanded = true;
            } else {
                $('#presentationTable').hide();           
                expanded = false;
            }       
} 


function updateTextArea() 
{
        var allVals = [];
        $('#presentationTable :checked').each(function () {
           allVals.push($(this).val());
        });
        $('#presentatioonTableimputValue').val(allVals);

    }
$("#presentationTable label input").click(function(){
    updateTextArea();
});
 $(document).click(function(event){
    var $trigger = $(".multiselect");
    if($trigger !== event.target && !$trigger.has(event.target).length){
        $("#presentationTable").slideUp("fast");

        // updateTextArea();
    }           
});

每次单击输入字段时,都会创建新的复选框,这就是问题所在.
希望它能解决你的问题.

javascript – 使用jQuery复选框选择的MultiSelect下拉列表

相关推荐