選択ボックスのオプションを動的に非表示にする

ウラジーミル・サボー

私はサッカー選手のためのウェブサイトを構築しています。私は、サイトの管理者が後者のリストのためにデータベースに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]

編集
0

コメントを追加

0

関連記事

分類Dev

選択ボックスのオプションスタイル属性に非表示ボタンを表示する

分類Dev

選択したオプションを別の選択ボックスから非表示にする

分類Dev

動的選択ボックステキストボックスの値から選択ボックスにオプションを動的に追加する方法

分類Dev

選択ボックスにオプションを動的に追加する方法

分類Dev

select2jqueryまたはjavascriptの次の選択ボックスで選択したオプションを非表示にする

分類Dev

選択ボックスを非表示にし、選択に基づいてボックスオプションを選択します

分類Dev

2つの選択ボックスを作成して、それらが一致しない場合に互いに非表示にし、2番目のオプションを自動的に選択するにはどうすればよいですか?

分類Dev

動的選択ボックスの行に基づいて生成された選択オプションを表示する方法

分類Dev

jqueryまたはjavascriptを使用して、選択ボックスで繰り返されるオプションのテキスト値を非表示にします

分類Dev

モバイル:CSSを使用して選択ボックスの特定のオプションを非表示にする

分類Dev

選択ボックスで選択したオプションテキストを非表示にする方法、Angular 4

分類Dev

選択リストAngularJSのオプションを非表示にする方法は?

分類Dev

オプションを選択すると、複数選択ドロップダウンボックスの下に箇条書きが表示されます

分類Dev

選択ボックスオプションは表示または非表示になっていますか?

分類Dev

選択ボックスで空のオプションを選択すると、非表示のテーブル行がすべて表示されます

分類Dev

オプションを動的に削除しながら、選択ボックスの空のオプションを削除する方法

分類Dev

反応中の別の選択ボックスの値に基づいて、選択ボックスのオプションを動的にロードします

分類Dev

選択ボックスオプションを属性とともに動的に追加する

分類Dev

配列から選択ボックスにオプション値を動的に追加する

分類Dev

マット選択オプションに基づいて入力ボックスを表示する方法

分類Dev

マット選択オプションに基づいて入力ボックスを表示する方法

分類Dev

オプションを選択する前にボックスが表示されますか?

分類Dev

jqueryを使用して選択ボックスオプションにデータを表示する方法

分類Dev

divセクションを表示/非表示にするASP.NETラジオボタンの選択

分類Dev

javascriptの2つの選択ボックスにオプションオブジェクトを追加する

分類Dev

MS Accessフォーム:コンボボックスの選択オプションを動的に変更するにはどうすればよいですか?

分類Dev

兄弟(非表示)チェックボックスを選択するために、グループ内のいずれかのラジオオプションを取得するにはどうすればよいですか?

分類Dev

ドロップダウン選択ボックスのオプションに自動的に配置されます

分類Dev

選択オプションでdiv要素を非表示にする

Related 関連記事

  1. 1

    選択ボックスのオプションスタイル属性に非表示ボタンを表示する

  2. 2

    選択したオプションを別の選択ボックスから非表示にする

  3. 3

    動的選択ボックステキストボックスの値から選択ボックスにオプションを動的に追加する方法

  4. 4

    選択ボックスにオプションを動的に追加する方法

  5. 5

    select2jqueryまたはjavascriptの次の選択ボックスで選択したオプションを非表示にする

  6. 6

    選択ボックスを非表示にし、選択に基づいてボックスオプションを選択します

  7. 7

    2つの選択ボックスを作成して、それらが一致しない場合に互いに非表示にし、2番目のオプションを自動的に選択するにはどうすればよいですか?

  8. 8

    動的選択ボックスの行に基づいて生成された選択オプションを表示する方法

  9. 9

    jqueryまたはjavascriptを使用して、選択ボックスで繰り返されるオプションのテキスト値を非表示にします

  10. 10

    モバイル:CSSを使用して選択ボックスの特定のオプションを非表示にする

  11. 11

    選択ボックスで選択したオプションテキストを非表示にする方法、Angular 4

  12. 12

    選択リストAngularJSのオプションを非表示にする方法は?

  13. 13

    オプションを選択すると、複数選択ドロップダウンボックスの下に箇条書きが表示されます

  14. 14

    選択ボックスオプションは表示または非表示になっていますか?

  15. 15

    選択ボックスで空のオプションを選択すると、非表示のテーブル行がすべて表示されます

  16. 16

    オプションを動的に削除しながら、選択ボックスの空のオプションを削除する方法

  17. 17

    反応中の別の選択ボックスの値に基づいて、選択ボックスのオプションを動的にロードします

  18. 18

    選択ボックスオプションを属性とともに動的に追加する

  19. 19

    配列から選択ボックスにオプション値を動的に追加する

  20. 20

    マット選択オプションに基づいて入力ボックスを表示する方法

  21. 21

    マット選択オプションに基づいて入力ボックスを表示する方法

  22. 22

    オプションを選択する前にボックスが表示されますか?

  23. 23

    jqueryを使用して選択ボックスオプションにデータを表示する方法

  24. 24

    divセクションを表示/非表示にするASP.NETラジオボタンの選択

  25. 25

    javascriptの2つの選択ボックスにオプションオブジェクトを追加する

  26. 26

    MS Accessフォーム:コンボボックスの選択オプションを動的に変更するにはどうすればよいですか?

  27. 27

    兄弟(非表示)チェックボックスを選択するために、グループ内のいずれかのラジオオプションを取得するにはどうすればよいですか?

  28. 28

    ドロップダウン選択ボックスのオプションに自動的に配置されます

  29. 29

    選択オプションでdiv要素を非表示にする

ホットタグ

アーカイブ