Question

<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>

我如何使用上述代码作为依赖＆＃34; team2＆＃34;关于什么价值＆＃34; team1＆＃34;如果我在第1组的选择选项中选择计算机科学，那么我不希望计算机科学出现在＆＃34; team2＆＃34;的选项中。

Answer 1

您可以为您的选择提供ID，并检查特定元素的选择。因此，您可以区分team1和team2，并删除具有相同值的team2-selection中的一些。它可能是这样的：

<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>

Answer 2

您可以使用Checkbox来解决这些问题。它解决了您的问题。

Answer 3

为什么选择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();

显示基于其他选择选项的选择选项

3 个答案: