Question

此页面将有16个下拉框，当我从每个页面中选择一个项目时，我希望将其从所有其他框中删除。

这是一个足球阵容页面，如果这可以帮助你描绘场景。

我希望这不是太模糊，而且我很清楚我正在努力奋斗。

谢谢：）

我在整个项目中使用：HTML，PHP，Javascript，AJAX

<select name="pl1">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl2">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl3">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select name="pl4">
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

Answer 1

使用jQuery：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery</title>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>

        <script type="text/javascript">
            $(function () {
                var selects = $('select.magic-select');
                $(selects).bind('change', function (evt) {
                    var newVal = $(this).val(), oldVal = $(this).data('old-val');

                    if (newVal != 0) {
                        $(selects).not(this).find('option[value="' + newVal + '"]').attr('disabled', 'disabled');
                    }

                    $(selects).not(this).find('option[value="' + oldVal + '"]').removeAttr('disabled');
                    $(this).data('old-val', newVal);
                });
            });
        </script>
    </head>

    <body>
        <?php
            $players = array('Ben', 'Jack', 'James', 'John', 'Foo', 'Bar', 'Allmighty Foobar');
            $numPlayers = count($players);

            for ($i = 1; $i <= $numPlayers; $i += 1) {
                printf('<select class="magic-select" name="pl%s" size="%s"><option value="0"></option>', $i, $numPlayers + 1);

                foreach ($players as $j => $name) {
                    printf('<option value="%s">%s</option>', $j + 1, $name);
                }

                echo '</select>';
            }
        ?>
    </body>
</html>

请注意，magic-select作为班级名称不是必须的。它可能是任何东西，但你必须相应地调整javascript。

Answer 2

Javascript解决方案：

function check() {
  d=document;
  myArray = [];
  for (h=0;h<4;h++) {
    myArray[h] = d.getElementById('pl'+(h+1)).value;
  }
  for (a=0;a<4;a++) {
    for (b=1;b<5;b++) {
    d.getElementById('pl'+(a+1)).options[b].style.display = "block";
      for (c=0;c<4;c++) {
        if(d.getElementById('pl'+(a+1)).options[b].value == myArray[c]) {
          d.getElementById('pl'+(a+1)).options[b].style.display = "none";
        }
      }
    }
  }
}

HTML：

<select id="pl1" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl2" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl3" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

<select id="pl4" onchange="check();">
  <option value="">Choose</option>
  <option value="1">Ben</option>
  <option value="2">Jack</option>
  <option value="3">James</option>
  <option value="4">John</option>
</select>

确保在选择

上使用id而非名称

Answer 3

原型解决方案：

$$('select').each(function(item) {
    Event.observe(item, 'change', function(e) {
        var el = e.srcElement;
        var val = el.options[el.selectedIndex].innerHTML;
        $$('select').each(function(item) {
            if (item != el) {
                for (var i = 0; i < item.options.length; i++) {
                    if (item.options[i].innerHTML == val) {
                        item.removeChild(item.options[i]);
                    }
                }
            }
        });
    });
});

http://jsfiddle.net/qrhe7/

Answer 4

我已经接受了@Tokes的回答并使它更容易理解，并为它添加了一些jQuery用于下拉和选项选择。我提供这个因为有人在努力实现它。我使用最直接的选择器，所以jQuery不必如此努力工作。我在68个下拉中使用了这个逻辑，其中包含68个选项，当我开始使用jQuery和我正在使用的for循环数量时，性能有点糟糕但是现在它真的很快，所以我希望有人得到一些用处它。感谢Tokes你的答案对我的情况有帮助:)）

function _updateDropdowns() {

    // gather selects with class so we dont grab all
    var select = $('#tbl_fieldMap select.table-fields');

    // store used fields
    var used = [];

    // collect all selected values
    for (var x = 0; x < select.length; x++) {

        // get selects value
        var val = select[x].value;

        // dont add empty
        if (val != '')
            used[x] = val;
    }

    // foreach select box
    for (var a = 0; a < select.length; a++) {

        // get options that matter (excludes 'default entry')
        var options = $(select[a]).children('.table-option');

        // foreach option in select
        for (var c = 0; c < options.length; c++) {

            // current option
            var opt = options[c];

            if ($.inArray(opt.value, used) > -1) {
                // hide if already used
                opt.style.display = "none";
            } else {
                // show if not used
                opt.style.display = "block";
            }
        }
    }
}

Answer 5

.data（） =存储与指定元素关联的任意数据和/或返回已设置的值。

.not（） =从匹配元素集中删除元素。

.on（） =会将一个或多个事件的事件处理函数附加到所选元素（在这种情况下更改）

.find（） =获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。在这种情况下，找到已经使用并放入名为prevValue的var中的元素，然后检查是否与其他选择字段匹配，然后从选择选项中删除它们。

$(document).ready(function(){

$('select').on('change', function(event ) {
   var prevValue = $(this).data('previous');

$('select').not(this).find('option[value="'+prevValue+'"]').show();    
   var value = $(this).val();

    $(this).data('previous',value);         
    $('select').not(this).find('option[value="'+value+'"]').hide();

  });

});

在另一个下拉列表中选中时从下拉列表中删除项目

5 个答案: