Javascript來隱藏所選選項

Question

我有這樣的代碼隱藏選定的選項：

function connect() 
{ 
    $(".selectbox option").show(); 
    $(".selectbox").each(function(i) { 
     var obj = $(".selectbox option[value='" + $(this).val() + "']"); 
     if($(this).val() != "") obj.hide();  
    }); 
} 

function to() 
{ 
    $(".selectboxes option").show(); 
    $(".selectboxes").each(function(i) { 
     var obj = $(".selectboxes option[value='" + $(this).val() + "']"); 
     if($(this).val() != "") obj.hide();  
    }); 
} 

，但現在我的問題是，我使用PHP來生成選擇標籤，並在PHP代碼我有一個條件一旦它看到這個值，它會自動添加selected = selected。但我的JS仍然會在下拉列表中顯示該變量，即使它已被選中。我試圖加入：

$('.selectboxes option:selected').find("option").hide(); 

但它沒有工作。任何想法應該如何解決這個問題？

順便說一句：我忘了提及，PHP代碼將生成多個選擇標記與相同的值將使用該功能，因此，當我有3選擇標記1將有預先選定的值，其他2將是null，現在當我點擊其中沒有選定值的那兩個時，我仍然可以在下拉菜單中看到選擇1中已經預先選擇的選項，我想要做的就是它應該被自動隱藏，該功能它不會隱藏它，直到我從下拉菜單中選擇其他選項。因爲這行：

$(".selectbox option").show(); 

會顯示在下拉列表中的所有選擇，是否有條件免除「this」值？

SELECT PART：

for($z=0;$z<$rows_updatedrow;$z++) 
{ 
?> 
<select id = "sc" name = "connect_array[]" class="input-select selectbox" onchange = "connect()"> 
<option value = "">--Select--</option> 
<?php 
for($zz=0;$zz<$rows_getconnect;$zz++) 
{ 
    $data_getconnect = mysql_fetch_assoc($query_getconnect); 
    $field_name_getconnect[] = $data_getconnect['field_name']; 
    $field_display_getconnect[] = $data_getconnect['field_display']; 
    $field_type_getconnect[] = $data_getconnect['field_type']; 
    if((($field_name_getconnect[$zz] == "friends_name" && $connect == 2) || $field_type_getconnect[$zz] == "email") && $z == 0){ 
    $selected = "selected=selected"; 
    }else{ 
    $selected = ""; 
    } 
?> 
<option value = "<?php echo $field_name_getconnect[$zz]; ?>" <?php echo $selected; ?>><?php echo $field_display_getconnect[$zz]; ?></option> 
<?php 
} 
?> 
</select> 
connect to 
<br/> 
<?php 
} 
?> 
</div> 
<div class = "right"> 
<?php 
for($a=0;$a<$rows_updatedrow;$a++) 
{ 
?> 
<select name = "to_array[]" class="input-select selectboxes" onchange = "to()"> 
<option class = "option" value = "">--Select--</option> 
<?php 
for($aa=0;$aa<$rows_getto;$aa++) 
{ 
    $data_getto = mysql_fetch_assoc($query_getto); 
    $field_name_getto[] = $data_getto['field_name']; 
    $field_display_getto[] = $data_getto['field_display']; 
    $field_type_getto[] = $data_getto['field_type']; 
    if((($field_name_getto[$aa] == "friends_name" && $to == 2) || $field_type_getto[$aa] == "email") && $a == 0){ 
    $selected = "selected=selected"; 
    }else{ 
    $selected = ""; 
    } 
?> 
<option class = "option" value = "<?php echo $field_name_getto[$aa]; ?>" <?php echo $selected; ?>><?php echo $field_display_getto[$aa]; ?></option> 
<?php 
} 

謝謝

Answer 1

你已經在你的選擇中選擇選項 - 無需找到選項 - 作爲將返回一個空數組

$('.selectboxes option:selected').hide(); 
// get rid of .find('option') 

豁免this價值..我猜你指的是選定的價值..你可以使用：不作爲undefined陳述

$(".selectbox option:not(:selected)").show(); 

因爲你使用jQuery你可以取出內嵌的onChange ..和改變事件處理程序綁定到選擇的元素在DOM準備

$(function(){ 
    $('select').change(function(){ 
     var $sel = $('option:selected'); // get all selected options 
     $('option').show(); // show all options 
     $sel.each(function(i,v){ // loop through selected options 
      var $index = $(v).index(); // get index of selected option 
      $('select').not($(this).parent()).each(function(){ // loop through other select - not current one  
       if($index != 0){ // not default index 
        $(this).find('option').eq($index).hide(); // hide selected option in other dropdowns 
       } 
      }); 
     });  
    }).change(); // <-- trigger change right away 
}); 

http://jsfiddle.net/VE7jA/

Answer 2

正如有人說，你正試圖在選項中找到一個選項，所以你必須擺脫.find電話。

除此之外，隱藏<option>元素不能跨瀏覽器工作，因此您必須刪除選項，並在必要時將其添加回去。有幾種方法可以管理這些方法，包括將所有選項列表存儲在變量中（作爲數組，對象甚至是HTML字符串）。

Answer 3

隱藏option元素並不總是被支持。更習慣的方法是禁用它。

obj.prop("disabled", true); 

或者像這樣簡化它。

$(".selectbox option:selected").prop("disabled", true); 

或這個。

$(".selectbox").each(function() { 
    this.options[this.selectedIndex].disabled = true; 
}); 

Answer 4

$('.selectboxes option:selected').find("option").hide(); 

你正在努力尋找裏面的選項（「選項」）..試試這個

$('.selectboxes option:selected').hide(); 

也都可以，如果你再次使用它刪除元素一勞永逸。 。

$('.selectboxes option:selected').remove(); 

要刪除基於價值的選項，你可以嘗試

$('.selectboxes option[value="0"]').remove() ; // Removes option with value 0