CODEWITHSUNDEEP
javascriptjquery
Mark Gilchrist
Mark Gilchrist

Reputation: 2032

remove option from all select boxes of the same class except the one clicked

I have a booking form for a hotel, where customers can elect who the share a room with. each row represents one guest name and the have a drop down menu () with the id numbers of all the other guest as options.

when a guest in row one decides to share a room with guest id=3, I want row ones drop down box to show a 3, row 3 to show a one and all the other rows to have 1 and 3 options removed from their select boxes.

I have got the below code, but the .not(this), is not working, any pointers as to why would be warmly appreciated.

here is the form

<?php
    for($a=0;$a<15;$a++)
    {
        echo "
<tr id=".($a+1)."><td>".($a+1)."</td>
    <td><select name='title[]'>
        <option value='Ms'>Ms</option>
        <option value='Mrs'>Mrs</option>
        <option value='Mr'>Mr</option>
        <option value='Dr'>Dr</option>
        </select></td> 
    <td><input type='text' name='firstname[]' size='10'></td>
    <td><input type='text' name='lastname[]' size='10' ></td>
    <td><input type='text' name='email[]'></td>
    <td><input type='text' name='passport_no[]'></td>
    <td><input type='date' name='dob[]' size='10'></td>
    <td><select name='room_pref[]' class='room_pref'>
        <option value='TWIN'>twin</option>
        <option value='DOUBLE'>double</option>
        <option value='SINGLE'>single</option>
        </select></td>
    <td><select name='share_w[]' class='share'>";
   for($b=1;$b<16;$b++)
   {
       echo "<option value=".$b.">".$b."</option>";
   }     

  echo "<option value ='ALONE'>Alone</option>
 </select></td>
    <td><input type='text' name='diet[]'></td>
    <td><input type='text' name='allergies[]'></td>
 </tr>";

?>

and here is my jquery

$('.share').change(function(){
    var shareW=$(this).val();
    $(".share option[value="+shareW+"]").not(this).remove();
}):

Upvotes: 1

Views: 715

Answers (1)

PSL
PSL

Reputation: 123739

this here means select not option, you need to apply not on the .share collection and not on option.

Try

 $(".share").not(this).children("option[value="+ this.value +"]").remove();

You could also avoid creating .share collection over and again in the click handler.

var $share = $('.share');
$share.change(function(){
    $share.not(this).children("option[value="+ this.value +"]").remove();
});

Upvotes: 3

Related Questions