remove options from remaining select box with jquery and php

Question

its me again lol.

I am facing a very specific issue that i need a hand with.

Im not really ready to refactor a full of code that some other guy did, they asked me if there was a way to ensure, that out of 3 select boxes, we could remove from the others, whichever were selected, as to avoid having the 3 select boxes, having the same value.

here is the code thy gave me.

$questions = array (
    'question1' => 'question1',
    'question2' => 'question2',
    'question3' => 'question3',
    'question4' => 'question4',
    'question5' => 'question5'
);

then some html

<table>
    <tr>
        <td>
            <?php echo $this->Form->input('pregunta1', array('options' => $questions/*, 'empty' => 'Seleccione una pregunta'*/));?><br>
            <?php echo $this->Form->input('respuesta1', array('required' => 'required')); ?>
        </td>
        <td>
            <?php echo $this->Form->input('pregunta2', array('options' => $questions/*, 'empty' => 'Seleccione una pregunta'*/));?><br>
            <?php echo $this->Form->input('respuesta2', array('required' => 'required')); ?>
        </td>
        <td>
            <?php echo $this->Form->input('pregunta3', array('options' => $questions/*, 'empty' => 'Seleccione una pregunta'*/));?><br>
            <?php echo $this->Form->input('respuesta3', array('required' => 'required')); ?>
        </td>
    </tr>
</table>

What i need is, a way to remove from every select box, whichever questions are selected in the other 2 with jquery if even possible.

thanks a lot for your time and effort!

regards,

Jose Chafardet

Answer 1

The easiest way I can thin of doing this with jQuery is to set each option's value to the same ID.

<select id="option1">
  <option value="1">Text</option>
  <option value="2">Text2</option>
  <option value="3">Text3</option>
</select>

<select id="option2">
  <option value="1">Text</option>
  <option value="2">Text2</option>
  <option value="3">Text3</option>
</select>

<select id="option3">
  <option value="1">Text</option>
  <option value="2">Text2</option>
  <option value="3">Text3</option>
</select>

The with jquery you need to hook the .change() event. http://api.jquery.com/change/

and every time one of the selects is changed to a different option, you remove the option from the other 2 using the .remove() function http://api.jquery.com/remove/

$('#option1').change(function(){
          var id = $(this).val();

          var hld = $('#option2');
          hld.find( 'option[value=' + id + ']').remove();
})


$('#option2').change(function(){
         var id = $(this).val();

         var hld = $('#option3');
         hld.find( 'option[value=' + id + ']').remove();
})

Mind you this is very rough code, but should give you an idea of how to do this. You can also add the option back if you want by using the .append() function.