0

jquery プラグイン jquery.chained.js の修正版を使用して、選択ボックスの別の値に基づいて選択ボックス オプションとチェックボックスを除外しています。ただし、以前の選択ボックスのオプション 2 に基づいて、選択ボックスをフィルター処理する必要があります。

私は3つの選択ボックスを持っています。

  1. スタッフ
  2. 部屋
  3. サービス

およびいくつかのチェックボックスまたは選択ボックス

  • アドオン

上記のアドオンは、チェックボックスまたはドロップダウンとして表示する設定に依存します

現在の方法を変更StaffするServicesと、Addonsオプションは、スタッフがアクセスできるサービスに変更されます。ただし、それらにアクセスできるものとそれらのサービスを提供するものに基づいて設定するようServicesにする必要があります。AddonsStaffServicesRooms

複数の選択ボックスのサポートを追加するために、この既に変更されたスクリプトを変更するのを手伝ってくれる人はいますか? これをチェーン化して他の要素のスクリプトにも使用できる可能性があるため、汎用性を維持したいと考えています。

私が探しているものを要約すると、ルーム選択ボックスのサポートを追加して、サービスとアドオンサービスのオプションをさらに絞り込むことです。

サンプル コードはhttp://bit.ly/uzEDL2にあります。

EDIT：checkboxradio（）はjquery Mobile用であるため、心配する必要はありません。

4

1 に答える 1

1

子の選択を 2 つの親の値に依存させるには、 のようなクラス名を使用しますfirst\second。非常に複雑な選択構造がある場合、この種のクラスを維持するのは面倒になることに注意してください。そのため、プラグインのリモート バージョンを使用する方が簡単な場合があります。

プラグインのドキュメントからの例。この例では、ディーゼル エンジンは BMW 3 および 5 シリーズ セダンでのみ使用できます。これは、クラス名series-3\sedanとを使用して実現されseries-5\sedanます。

<select id="series">
  <option value="">--</option>
  <option value="series-3" class="bmw">3 series</option>
  <option value="series-5" class="bmw">5 series</option>
  <option value="series-6" class="bmw">6 series</option>
  <option value="a3" class="audi">A3</option>
  <option value="a4" class="audi">A4</option>
  <option value="a5" class="audi">A5</option>
</select>

<select id="model">
  <option value="">--</option>   
  <option value="coupe" class="series-3 series-6 a5">Coupe</option>
  <option value="cabrio" class="series-3 series-6 a3 a5">Cabrio</option>
  <option value="sedan" class="series-3 series-5 a3 a4">Sedan</option>
  <option value="sportback" class="a3 a5">Sportback</option>
</select>

<select id="engine">
  <option value="">--</option>   
  <option value="25-petrol" class="series-3 a3 a4">2.5 petrol</option>
  <option value="30-petrol" class="series-3 series-5 series-6 a3 a4 a5">3.0 petrol</option>
  <option value="30-diesel" class="series-3\sedan series-5\sedan a5">3.0 diesel</option>
</select>

$("#model").chained("#series");
$("#engine").chained("#series, #model");

HTML が無効であることに注意してください。単一の数字は有効なクラス名ではありません。[a–z]クラス名は、アンダースコア文字、アンダースコア[_]、またはダッシュで始まり、[-]その後に数字、文字、アンダースコア、およびダッシュが続く必要があります。より良い説明は、CSS 識別子に許可されている文字から見つけることができます。

于 2011-12-02T19:23:04.510 に答える