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

<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>

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

<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>

• javascript
• jquery

Share Follow asked May 17, 2014 at 15:13 Arman FeyziArman Feyzi 83822 gold badges1313 silver badges2828 bronze badges 3

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

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

First you need to get the value selected on the first, then you need to pare 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 pare
            if($(element).text() == cm) {
                $(this).remove();
            }
        });
        $('.soma2').prop('selectedIndex', 0); // reset selected value
    });

});
</script>

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>

Instead of

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

use

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

 <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>