Conflicting JavaScript functions?

Question

I have a javascript function that will remove an option from a select tag when it was chosen.

the problem now is that i have 2 select tags that uses 2 of those function, now sometimes the select tags may contain the same data, thus when it is chosen on the first tag it will also be removed from the second tag.

the code is:

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

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
}

tried using different classes for the two select tags but still not helping.

the options of the select tags are created dynamically thus there are times when both of them contain similar data. this cannot be avoided.

Is there anyway for me to go around this problem?

Thank you!

pass the element's ID or the element itself to the functions. — jbabey
– jbabey, Commented Sep 21, 2012 at 19:11
You have not given enough data to answer the question. I get that you are selecting elements by classname and attribute. Is your question what is the best additional mechanism you can use to avoid selecting elements that accidentally have the same class/attribute? — Ed Bayiates
– Ed Bayiates, Commented Sep 21, 2012 at 19:40
@AresAvatar yes that's it. will post additional information about the code now. — magicianiam
– magicianiam, Commented Sep 21, 2012 at 20:24

James Montagne · Accepted Answer · 2012-09-21 20:31:02Z

2

When this function is called onChange, this is the select which has changed. You can then use find to get elements within that select.

function connect()
{
    var $this = $(this);

    $this.find("option").show();

    if($this.val() != ""){ 
        $this.find("option[value='" + $this.val() + "']").hide();
    }    
}

answered Sep 21, 2012 at 20:31

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

magicianiam Over a year ago

what does $(this) suppose to hold? when i tried to alert it, it showed [Object object]. or do i need to pass a variable to that function? thank you

James Montagne Over a year ago

this is the select element, calling $(this) wraps this in a jquery object so that you can use jquery functions on it. This is how it was being used in your original code as well.

magicianiam Over a year ago

would you mind explaining it a bit more. or expanding your answer. i a m not that good with jquery and js. thank you :)

magicianiam Over a year ago

got it to work now thanks for this. it lead me to the right path. :)

Collectives™ on Stack Overflow

Conflicting JavaScript functions?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related