Hide selected options on multiple select

Question

Given the following html

    <select name="question_order[]" id="data1">
      <option value="">None</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br />
    <select name="question_order[]" id="data2">
      <option value="">None</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <br />
    <select name="question_order[]" id="data3">
      <option value="">None</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>

How can I hide/remove the selected options on data3, if its already selected on data1 and data2?

Example if I select 1 on data1, then 2 on data2, how can I remove those two option on data3?

Thank you in advance. Greetings.

Answer 1

Check the Js fiddle

http://jsfiddle.net/aZPdd/

$('#data1').on('change', function() {
    var val=this.value;
   $("#data3").find("option:contains("+val+")").remove();
 });

$('#data2').on('change', function() {
     var val=this.value;
  $("#data3").find("option:contains("+val+")").remove();
});

$('#data3').on('change', function() {

});