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