Question

我已经写了代码来添加选择项，并且我想验证相同选项的添加并禁用相同选项的添加两次。选择选项添加效果很好，但我想一次又一次地禁用添加相同的值...

var employeeAdd = document.querySelector('.plus-icon');

if(employeeAdd) {
    employeeAdd.addEventListener('click', addAssignee);
}

function addAssignee(){
    var x = document.getElementById('all-employees').value;
    var text = $("#all-employees option:selected").text();

    var y = $(".added-employees").find('.emp-item').attr('value');

    if(x != y) {
        $(".added-employees").append("<div class='emp-item' value='" + x + "'>" + text + "</div>");
    }else{
        alert('Already Added');
    }
}

HTML

                <div class="assign-dropdown">
                    <select id="all-employees">
                        <option disabled selected value="">All Employees</option>
                        <option value="one">Saman</option>
                        <option value="two">sunil</option>
                        <option value="three">Shantha</option>
                    </select>

                    <div class="plus-icon">
                        <i class="fas fa-plus-square"></i>
                    </div>

                    <div class="added-employees">

                    </div>
                </div>

Answer 1

您将必须：

实际上禁用与刚刚添加的值相对应的option元素，

确保选项元素（尽管已禁用）不再被选择

$("#all-employees option").filter(function() { //find the value just added
    return $(this).text() == text; 
})
.prop('disabled', true) //disable the option element
.end().parent().val(''); //reset the select element

按如下所示设置新的事件侦听器：

    //set up a new event listener for deleting (jQuery)
    $(document).on('click', '.minus-icon', function() {
        //get the option value
        var value = $(this).closest('.emp-item').data('value');console.log( value );

        //perform deletion
        $(this).closest('.emp-item').remove();

        //enable the corresponding option element
        //start by finding the element
        $('#all-employees option').filter(function() {
            return this.value === value;
        })
        //now enable the element
        .prop('disabled', false)
        //then 'reset' the select element
        .end().parent().val('');
    });

var employeeAdd = document.querySelector('.plus-icon');

if(employeeAdd) {
    employeeAdd.addEventListener('click', addAssignee);
}

function addAssignee(){
    var x = document.getElementById('all-employees').value;
    var text = $("#all-employees option:selected").text();

    var y = $(".added-employees").find('.emp-item').val();

    if(x != y) {
        $(".added-employees").append("<div class='emp-item' data-value='" + x + "'>" + text + "<i class='fa fa-minus-square minus-icon'></i></div>");
        $("#all-employees option").filter(function() { return $(this).text() == text; }).prop('disabled', true).end().parent().val('');
    }else{
        alert('Already Added');
    }
}

//set up a new event listener for deleting (jQuery)
$(document).on('click', '.minus-icon', function() {
    //get the option value
    var value = $(this).closest('.emp-item').data('value');
    
    //perform deletion
    $(this).closest('.emp-item').remove();
    
    //enable the corresponding option element
    //start by finding the element
    $('#all-employees option').filter(function() {
        return this.value === value;
    })
    //now enable the element
    .prop('disabled', false)
    //then 'reset' the select element
    .end().parent().val('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="assign-dropdown">
                    <select id="all-employees">
                        <option disabled selected value="">All Employees</option>
                        <option value="one">Saman</option>
                        <option value="two">sunil</option>
                        <option value="three">Shantha</option>
                    </select>

                    <div class="plus-icon">
                        <i class="fa fa-plus-square"></i>
                    </div>

                    <div class="added-employees">

                    </div>
                </div>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

所有jQuery解决方案：

$(function() {
    $('.plus-icon').on('click', function() {
        var x = $('#all-employees').val();
        var text = $('#all-employees option:selected').text();
        if( x && x.length ) {
            $(".added-employees").append("<div class='emp-item' data-value='" + x + "'>" + text + "<i class='fa fa-minus-square minus-icon'></i></div>");
            $("#all-employees option").filter(function() { 
                return $(this).text() == text; 
            })
            .prop('disabled', true)
            .end().parent().val('');
        } else {
            alert('Not a valid value');
        }
    });

    //set up a new event listener for deleting (jQuery)
    $(document).on('click', '.minus-icon', function() {
        //get the option value
        var value = $(this).closest('.emp-item').data('value');

        //perform deletion
        $(this).closest('.emp-item').remove();

        //enable the corresponding option element
        //start by finding the element
        $('#all-employees option').filter(function() {
            return this.value === value;
        })
        //now enable the element
        .prop('disabled', false)
        //then 'reset' the select element
        .end().parent().val('');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="assign-dropdown">
                    <select id="all-employees">
                        <option disabled selected value="">All Employees</option>
                        <option value="one">Saman</option>
                        <option value="two">sunil</option>
                        <option value="three">Shantha</option>
                    </select>

                    <div class="plus-icon">
                        <i class="fa fa-plus-square"></i>
                    </div>

                    <div class="added-employees">

                    </div>
                </div>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

如何验证选择的相同选项并添加禁用

1 个答案: