Question

我需要确保在其中一个列表中选择值时，不能在任何其他列表中选择它。这可以用jQuery完成，还是我需要创建一个不允许选择相同值的验证器？

我有多个选择列表，基本上只是数字，即

process_name = "CCC.exe"
for proc in psutil.process_iter():
    if proc.name() == process_name:
        print ("have")
    else: 
        print ("Dont have")

Answer 1

我选择隐藏选项标记，而不是按照我的建议删除。这是一个完整的工作html文件。我打算在jsfiddle上发布它，但由于某种原因它不会起作用。 非常了解 .change处理程序中的复制/粘贴错误。花了一些时间自己想知道它为什么不起作用，但这是一个复制/粘贴错误。

请注意，此代码仅在每个选择标记具有相同选项时有效。但是，如果您稍后添加或删除选项，它会动态运行，同时保持它们同步，如上所述。

如果你需要它来处理只有一些相同选项的列表，那么你将无法处理在选项上拥有ID然后根据它进行隐藏/取消隐藏而不是索引到子项中，但是基本的力学是一样的。

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <style type="text/css">
        .gone {display: none;}
    </style>
    <script type="text/javascript">
        $(document).ready(function() {
            // hides the option selected in the others
            var hideValue = function(oldval, val, options, others) {

                var unhideChild = -1;
                var hideChild = -1;
                // find which child to hide in the others
                // also find the value we change from and unhide it
                for (var i=1; i<options.length; i++) {
                    var optval = $(options[i]).val();
                    console.log(optval);
                    if (optval == val) {
                        hideChild = i;
                    }
                    if (optval == oldval) {
                        unhideChild = i;
                    }
                }
                if (unhideChild == -1 && oldval != "None") {
                    console.log("uh oh");
                    return;
                }
                if (hideChild == -1 && val != "None") {
                    console.log("uh oh");
                    return;
                }

                // hide them using the passed in selectors
                for (var j=0; j<others.length; j++) {
                    if (oldval != "None") {
                        console.log("unhiding: " + others[j] + " v: " + unhideChild);
                        $($(others[j]).children()[unhideChild]).removeClass("gone");
                    }
                    if (val != "None") {
                        console.log("hiding: " + others[j] + " v: " + hideChild);
                        $($(others[j]).children()[hideChild]).addClass("gone");
                    }
                }
            }

            // we need to keep track of the old values so we can unhide them if deselected
            var val1 = "None";
            var val2 = "None";
            var val3 = "None"

            $('#101_1').change(function() {
                var opts = $('#101_1').children();
                var v = $('#101_1').val();
                hideValue(val1, v, opts, ["#101_2", "#101_3"]);
                val1 = v;
            });
            $('#101_2').change(function() {
                var opts = $('#101_2').children();
                var v = $('#101_2').val();
                hideValue(val2, v, opts, ["#101_1", "#101_3"]);
                val2 = v;
            });
            $('#101_3').change(function() {
                var opts = $('#101_3').children();
                var v = $('#101_3').val();
                hideValue(val3, v, opts, ["#101_2", "#101_1"]);
                val3 = v;
            });
        });
    </script>
</head>
<body>

    <select value="None" id="101_1">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select value="None" id="101_2">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
    <select value="None" id="101_3">
        <option value="None">None</option>
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</body>
</html>

此外，如果您不需要“无”值，请将其删除。然后启动选择0的选择ta 101_1，选择1选择101_2等。然后确保触发更改处理程序。此外，如果没有None选项，for循环需要以i = 0开始。

所以基本上将它添加到脚本的末尾，并确保var i从0开始而不是1。

$('#101_1').val('0');
$('#101_2').val('1');
$('#101_3').val('2');
$('#101_1').trigger('change');
$('#101_2').trigger('change');
$('#101_3').trigger('change');

Answer 2

我已经为以下一位同事使用了以下代码：

HTML：

<h3>List 1</h3>
<select id="select1">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

<h3>List 2</h3>
<select id="select2">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

<h3>List 3</h3>
<select id="select3">
  <option value="null">-- select --</option>
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
  <option value="D">D</option>
  <option value="E">E</option>
</select>

带有jQuery的JS：

$(document).ready(function() {
  var selectState = {
    'select1': 'null',
    'select2': 'null',
    'select3': 'null'
  };

  $('select').change(function() {
    var selectId = $(this).attr('id');
    var selectedOptionValue = $(this).val();

    // for each other select element
    $('select[id!="' + selectId + '"]').each(function(index) {
      // enable the old option
      $(this).find('option[value="' + selectState[selectId] + '"]').removeAttr('disabled');

      if (selectedOptionValue !== 'null') { // if selected a real option
        // disable the new option
        $(this).find('option[value="' + selectedOptionValue + '"]').attr('disabled', 'disabled');
      }
    });

    selectState[selectId] = selectedOptionValue; // update the new state at the end
  });
});

这是 CodePen

Jquery不允许多个选择列表中的相同值

2 个答案: