根据其他选择值隐藏选择中的选项

Question

我有两个拼车网站的到达城市和出发城市的选择标签，我想防止用户在选择到达城市和选择出发城市时选择同一个城市。

这里有一个例子：

<select name="departure" size="1">
  <option value="1">NY</option>
  <option value="2">FL</option>
  <option value="3">LA</option>
</select>
<select name="arrival" size="1">
  <option value="1">NY</option>
  <option value="2">FL</option>
  <option value="3">LA</option>
</select>

我只想防止用户使用JavaScript或任何其他解决方案

Answer 1

对于一个简单的解决方案，我建议：

function deDupe(el) {
    var opt = el.selectedIndex,
        other = el.name == 'departure' ? document.getElementsByName('arrival')[0] : document.getElementsByName('departure')[0],
        options = other.getElementsByTagName('option');
    for (var i = 0, len = options.length; i < len; i++) {
        options[i].disabled = i == opt ? true : false;
    }
}
var departure = document.getElementsByName('departure')[0],
    arrival = document.getElementsByName('arrival')[0];
deDupe(document.getElementsByName('departure')[0]);
departure.onchange = function () {
    deDupe(departure);
};
arrival.onchange = function () {
    deDupe(arrival);
};

JS Fiddle演示。

参考文献：

• CCD_ 1
• CCD_ 2