To avoid duplicate drop-down items with JQuery (For Create Compare)

Question

Excuse me (I can not write good English!) i want to when change combobox selected item, this item (selected item) hide in other combobox and when change again selected hide item show again in other combobox.

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>

<select class="soma2">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>

<script type="text/javascript">
$('.soma1').change(function () {
    var cm = $('.soma1').text();
    $('.soma2 option:contains(' + cm + ')').each(function () {
        if ($(this).text() == cm) {
            $(this).remove();
        }
    });
});
</script>

i dont have remove items! i want only Hide items, so that i could show later! — Arman Feyzi, May 17 '14 at 15:19
Duplicate of [http://stackoverflow.com/questions/22955253/disable-select-option-value-when-selected/22956237#22956237](http://stackoverflow.com/questions/22955253/disable-select-option-value-when-selected/22956237#22956237) — Michel, May 17 '14 at 15:37
Most browsers don't support hiding (or disabling) individual options in a select. — Maurice Perry, May 17 '14 at 15:42

user1978142 · Accepted Answer · 2014-05-17T16:05:53.460

First you need to get the value selected on the first, then you need to compare it to the second by getting all the children of the second select box by using $.each() all of the children, then just hide/show. Consider this example: Sample Fiddle

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>

<select class="soma2">
    <option disabled selected>Select</option>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    var default_values = $('.soma2').children();

    $('.soma1').change(function () {
        var cm = $('.soma1').val();
        $('.soma2').html(default_values);
        $('.soma2').children().each(function(index, element) {
            // loop each children and compare
            if($(element).text() == cm) {
                $(this).remove();
            }
        });
        $('.soma2').prop('selectedIndex', 0); // reset selected value
    });

});
</script>

@MauricePerry thanks for pointing this out, i have changed the code accordingly and modified it a little bit. what about `.remove()`? does it also have issues on some browsers? — user1978142, May 17 '14 at 16:07

score 0 · Answer 2 · edited May 17 '14 at 15:56

0

Instead of

var cm = $('.soma1').text();

use

var cm = $('.soma1').val();

edited May 17 '14 at 15:56

ProgramFOX

6,131
11
45
51

answered May 17 '14 at 15:25

Grainier

1,634
2
17
30

score 0 · Answer 3 · answered May 17 '14 at 15:37

You could also use $('.soma1').find('option:selected').html();

Here is a fiddle

<select class="soma1">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
</select>

<select class="soma2">
   <option>item1</option>
   <option>item2</option>
   <option>item3</option>
   <option>item4</option>
</select>

<script type="text/javascript">
$('.soma1').change(function () {
    var selectedItem = $('.soma1').find('option:selected');
    $('.soma2').find('option').each(function(){
        if (selectedItem.html() != $(this).html()){
            $(this).remove();
        }
    });
});
</script>

score 0 · Answer 4 · answered May 17 '14 at 16:09

 <script>
 $( document ).ready(function() {
 $('select').change(function (evt) {
     var cm = $('.soma1').find("option:selected").val();
     $('.soma2 option').remove();
     $('.soma2').html($('.soma1').html());
     $('.soma2').find("option:contains("+cm+")").remove();
     });

 });
</script>

use the below html

 <select class="soma1">
<option value="item1" >item1</option>
<option value="item2">item2</option>
<option value="item3">item3</option>
<option value="item4">item4</option>
</select>

<select class="soma2">
 <option value="item1" >item1</option>
<option value="item2">item2</option>
<option value="item3" >item3</option>
<option value="item4">item4</option>
</select>

To avoid duplicate drop-down items with JQuery (For Create Compare)

4 Answers4