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

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

但它不起作用。关于如何解决这个问题的任何想法？

BTW：我忘了提一下，php代码将生成多个具有相同值的选择标签，这些标签将使用该功能，因此当我有3个选择标签时，1将具有预先选择的值，而另外2个将为空，现在当我点击其中两个没有选择任何值但我仍然可以在下拉列表中看到已经在选择1中预先选择的选项时，我想要做的是它应该自动隐藏，用功能它不会隐藏它，直到我从下拉列表中选择其他选项。从这一行开始：

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

会显示下拉列表中的所有选项，是否有条件免除“此”值？

选择零件：

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值..我猜你指的是所选的值..你可以使用：not as undefined stated

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

你可以取出内联onChange，因为你正在使用jQuery ..并将更改事件处理程序绑定到dom ready上的select元素

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

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

您正试图在选项中找到（'选项'）..试试这个

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

如果您再次使用该元素，也可以一次性删除该元素。

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

要根据值删除选项，您可以尝试

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

Answer 3

正如所说的那样，你试图在一个选项中找到一个选项，所以你必须摆脱.find电话。

除此之外，隐藏<option>元素不能跨浏览器工作，因此您必须删除选项，并在必要时添加它们。有几种方法可以管理它，所有方法都涉及在变量中存储完整的选项列表（作为数组，对象，甚至是HTML字符串）。

Answer 4

并不总是支持隐藏option个元素。更惯用的方法是禁用它。

obj.prop("disabled", true);

或者像这样简化它。

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

或者这个。

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

Javascript隐藏选定的选项

4 个答案: