私はサッカー選手のためのウェブサイトを構築しています。私は、サイトの管理者が後者のリストのためにデータベースに11人のプレーヤーを入力する必要があるシステムを持っています。
このために、各選択ボックスのオプションとしてプレーヤーを備えた11個の選択ボックスを備えたシステムを作成しました。管理者が最初の選択ボックスからJohnDoeを選択すると、そのオプションは他の10個の選択ボックスでは使用できなくなります。管理者が最初の選択ボックス(値0)でデフォルトのオプションを選択すると、JohnDoeが必要になります。すべての選択ボックスに戻ります。構造は次のとおりです。
<select class="first_team" name="player_1">
<option value="0">Choose</option>
<option value="1">test1</option>
<option value="2">test2 test</option>
<option value="3">test3</option>
<option value="4">test4</option>
.
.
.
</select>
<select class="first_team" name="player_2">
<option value="0">Choose</option>
<option value="1">test1</option>
<option value="2">test2 test</option>
<option value="3">test3</option>
<option value="4">test4</option>
.
.
.
</select>
私はこのようなことを試みましたが、正しく機能しませんでした(プレーヤーは永久に隠されていました):
$(".first_team").click(function(){
var value = $(this).val();
$(".first_team option[value=" + value + "]").hide();
});
プレーヤーは永久に隠されていました
それはあなたがプレイヤーを隠しているだけだからです。プレイヤーを再び見せることはどこにもありません。
選択が変更されるたびに選択されたすべてのプレーヤーを取得し、すべてのプレーヤーを表示し(デフォルトで)、選択されたすべてのプレーヤーを非表示にすることをお勧めします。このようなもの:
// Whenever any selection in any select element changes
$(".first_team").change(function() {
// First show all players
$(".first_team option").show();
// Then for each select element, hide the selected player from other elements
$(".first_team").each(function () {
var selectedPlayer = $(this).val();
// Hide it from every list
$(".first_team option[value=" + selectedPlayer + "]").hide();
// But don't hide it from *this* list
$(this).find("option[value=" + selectedPlayer + "]").show();
});
});
あります、おそらく同じ要素のこの表示/非表示/ショー毎回のすべてを必要としないこれを行うには、より効率的な方法を、私たちはここに要素の多くの話をしていない:(間違いなく読んで)。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加