爲了避免重複的下拉項與JQuery（創建比較）

對不起（我不能寫出好英文！）我想改變組合框選擇項目時，此項目（選定項目）隱藏在其他組合框中，在其他組合框中再次更改選定的隱藏項目顯示。爲了避免重複的下拉項與JQuery（創建比較）

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

來源

2014-05-17 Arman Feyzi

我沒有刪除的項目！我只想隱藏項目，以便我可以晚些時候顯示！ –

重複[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

大多數瀏覽器不支持隱藏（或禁用）select中的單個選項。 –

首先，你需要獲得第一選擇的值，那麼你需要讓所有的孩子把它比作第二通過使用$.each()所有孩子的第二個選擇框，然後只是隱藏/顯示。考慮下面這個例子：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>

來源

2014-05-17 15:27:45 user1978142

作品在Firefox上，而不是在鉻，Safari瀏覽器上，也沒有在IE –

@MauricePerry謝謝你指出這一點，我已經相應地改變了代碼並修改了一下。那麼'.remove（）'怎麼辦？它在某些瀏覽器上也有問題嗎？ – user1978142

很酷。 +1 –

而不是

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

使用

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

來源

2014-05-17 15:25:00 Grainier

您也可以使用$('.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>

來源

2014-05-17 15:37:17

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

使用下面的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>

來源

2014-05-17 16:09:44

爲了避免重複的下拉項與JQuery（創建比較）

回答

相關問題