-3
<select name = "team1">
  <option>Computer Science</option>
  <option>Mathematics</option>
  <option>Bioinformatic</option>
  <option>Management Sciences</option>
</select>
<select name = "team2">
  <option>Computer Science</option>
  <option>Mathematics</option>
  <option>Bioinformatic</option>
  <option>Management Sciences</option>
</select>

how can i use the above code as depending "team2" on what value "team1" have.If i select computer science in the select option of team 1, then i don't want computer science to appear in the options of "team2".

tanveer ashraf
  • 58
  • 8
  • 1
    Welcome to Stack Overflow! This question is a little short on information. Can you share what you have tried, and what problems have you run into? Please read [How to ask questions on StackOverflow](http://stackoverflow.com/help/how-to-ask) – Jay Blanchard Feb 09 '15 at 14:15

3 Answers3

0

You can give an ID to your selection and check the selection of the specific element. Thus you can distinguish between team1 and team2 and remove some in team2-selection with same value. it could be something like this:

<body>
 <select onChange="jsFunction()" id="team1" >
      <option onclick="jsFunction()">Computer Science</option>
      <option>Mathematics</option>
      <option>Bioinformatic</option>
      <option>Management Sciences</option>
    </select>

    <select id="team2">
      <option>Computer Science</option>
      <option>Mathematics</option>
      <option>Bioinformatic</option>
      <option>Management Sciences</option>
    </select>

    <script>
    function jsFunction(){
        var team1 = document.getElementById( "team1" );
        var team2 = document.getElementById( "team2" );
        for (i=0;i<4;i++){
            team2.remove(0);
        }
        var position=0;
        for (i=0;i<4;i++){
            if (i!=team1.selectedIndex){
            team2.options[position] = new Option(team1.options[i].value);
            position=position+1;
            }
        }

    }
    </script>
        </body>
Bine
  • 394
  • 4
  • 12
  • You can find solutions here: http://stackoverflow.com/questions/3301688/how-do-you-get-the-currently-selected-option-in-a-select-via-javascript and here http://stackoverflow.com/questions/1085801/get-selected-value-of-dropdownlist-using-javascript – Bine Feb 09 '15 at 14:21
  • i wrote it like – tanveer ashraf Feb 09 '15 at 14:32
  • you have to add the script-part into body after the definition of the selection. I edited my post – Bine Feb 09 '15 at 14:40
  • now it works only for 1st option, only computer science option is not showing in "team2", should i use AJAX to do it without submitting form?If Yes then could you please give me a hint? – tanveer ashraf Feb 09 '15 at 14:45
  • You don't need any AJAX or PHP. I edited my post again, so that an adjustment of the values of team2 is made as soon as the selection of team1 changes. – Bine Feb 09 '15 at 15:25
  • you're welcome. You can accept the answer, if you think it's the most useful one ;) – Bine Feb 09 '15 at 15:37
0

You can use Checkbox for these options.Its solves your Problem.

Aravinthan K
  • 1,763
  • 2
  • 19
  • 22
0

why PHP?

http://jsfiddle.net/655noe6p/

HTML:

<select name = "team1">
</select>
<select name = "team2">
</select>

JS:

var l = [
    'Computer Science',
    'Mathematics',
    'Bioinformatic',
    'Management Sciences'
];

$('select').change(function() {
    var me = $(this);
    var other = me.siblings();

    var text = me.children(':selected').text();

    other.each(function() {
        var select = $(this);

        var currentText = select.children(':selected').text();
        select.empty();
        $.each(l, function(k, d) {
            if(d != text) {
                select.append($('<option></option>').html(d).attr('selected', d == currentText));
            }
        });
    });
});

$('select').change().change();
Aitch
  • 1,617
  • 13
  • 24