Как проверить выбранную опцию и добавить отключить - PullRequest
Новая
       53

Как проверить выбранную опцию и добавить отключить

0 голосов
/ 01 февраля 2019

Я уже написал код для добавления выбранного элемента, и я хочу проверить правильность добавления одной опции и отключить добавление одной и той же опции дважды.Выбор опции add работает хорошо, но я хочу отключить добавление того же значения снова и снова ...

Предварительный просмотр HTML 

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>

1 Ответ

0 голосов
/ 01 февраля 2019

Вы должны:

  • фактически отключить элемент опции, соответствующий только что добавленному значению,

  • убедиться, что элемент опции, хотя и отключен, больше не выбран

    $("#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">

Решение All-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">
...