Javascript隐藏所选选项 [英] Javascript to hide selected option

问题描述

我有以下代码可隐藏所选选项:

I have this code to hide selected options:

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生成select标记，并且在该php代码中，我有一个条件，即一旦看到该值，它将自动添加selected = selected.但我的JS仍然会在下拉列表中显示该变量，即使该变量已被选中.我尝试添加:

but my problem now is that, I use PHP to generate the select tag, and in that php code i have a condition that once it sees this value it will automatically add selected=selected. but my JS would still display that variable in the drop down even though it is already selected. i tried adding:

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

但是它不起作用.我应该如何解决这个问题的任何想法?

but it did not work. any idea on how should i solve this problem?

顺便说一句:我忘了提一下，PHP代码将生成多个具有相同值的选择标签，该标签将使用该功能，因此当我有3个选择标签时，其中1个将具有预选择的值，而其他2个将为null ，现在，当我单击尚未选择任何值的两个选项中的任意一个时，我仍然可以在下拉菜单中看到已经在选择1中预先选择的选项，我想要做的是应该将其自动隐藏，功能，直到我从下拉菜单中选择其他选项，它才会隐藏它.从这行开始:

BTW: i forgot to mention that, the php code will generate multiple select tags with the same values that will use that function, thus when i have 3 select tags 1 will have the pre selected value and the other 2 will be null, now when i click on either 2 of those that have no values selected yet i can still see in the drop down the choice that was already pre selected in select 1, what i wanted to do is that it should be automatically hidden, with that function it will not hide it until i select other choices from the drop down. since this line:

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

是否会在下拉列表中显示所有选择，是否有条件免除"this"值?

would display all choices in the drop down, is there a condition for it to exempt "this" value?

选择零件:

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
}

谢谢

推荐答案

您已经在选择器中有了选定的选项-无需查找选项-这样会返回一个空数组

You already have the selected option in your selector - no need to find option - as that will return you an empty array

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

要免除this值..我猜您是在指选定的值..您可以使用:not作为未定义的声明

To exempt this value.. I'm guessing you're referring to the selected value.. you can use :not as undefined stated

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

由于使用的是jQuery，因此您可以取出内联onChange并将更改事件处理程序绑定到dom ready上的select元素

You can take out the inline onChange since you are using jQuery.. and bind the change event handler to the select elements on dom ready

$(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/

这篇关于Javascript隐藏所选选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！