1

我有这个代码来隐藏选定的选项：

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();

但它没有用。关于我应该如何解决这个问题的任何想法？

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

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

会在下拉列表中显示所有选项，是否有条件豁免“this”值？

选择部分：

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
}

谢谢你

4

4 回答 4

3

您已经在选择器中选择了选项 - 无需查找选项 - 因为这将返回一个空数组

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

免除this价值..我猜你指的是选定的价值..你可以使用 :not as undefined 声明

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

您可以取出内联 onChange，因为您使用的是 jQuery.. 并将更改事件处理程序绑定到 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/

于 2012-09-24T21:19:14.903 回答
1 
$('.selectboxes option:selected').find("option").hide();

您正在尝试在选项中查找（'option'）..试试这个

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

如果您再次使用它，您也可以一劳永逸地删除它。

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

要删除基于值的选项，您可以尝试

$('.selectboxes option[value="0"]').remove() ; // Removes option with value 0
于 2012-09-24T21:34:01.100 回答
0

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

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

于 2012-09-24T21:28:17.617 回答
0

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

obj.prop("disabled", true);

或者像这样简化它。

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

或这个。

$(".selectbox").each(function() { 
     this.options[this.selectedIndex].disabled = true; 
});
于 2012-09-24T21:29:57.843 回答