1

カープールのWebサイトに到着都市と出発都市の2つの選択タグがあります。ユーザーが到着都市の選択で同じ都市を選択できないようにしたいのですが、ここでの出発都市の選択は例です。

  <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またはその他のソリューションを使用して、ユーザーが両方の選択フィールドで同じ都市を選択できないようにしたいだけです

4

1 に答える 1

2

簡単な解決策として、私は提案します：

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フィドルデモ。

参照：

于 2013-02-26T23:22:56.243 に答える