0

次の機能を備えたフォームがあります。

フォームの目的は、アイテム コードを取得することです。項目はカテゴリに分類されます。まず、カテゴリの選択リストを表示します。ユーザーが特定のカテゴリを選択すると、そのカテゴリに属する​​アイテムのみが 2 番目の選択リストに表示されます。

この目的のために、3 つの変数を保存しています。

最初の変数には、すべての項目の配列が含まれています。それらは、OPTGROUP としてそれぞれのカテゴリにグループ化されます。OPTGROUP ラベルは、カテゴリーの説明です。この変数は隠されています。

2 番目の変数は、すべてのカテゴリの選択リストです。ラベルは「カテゴリの説明」で、値は「カテゴリ コード」です。

3 番目の変数は、選択されたカテゴリの項目を表示するための空の選択リストです。

私の要件はこれです：

ユーザーがカテゴリを選択すると、隠し変数 (最初の変数 - 上記のとおり) を検索して、選択したカテゴリに一致するラベルを持つ optgroup を探します。次に、そのグループ (そのカテゴリに属する​​項目を表す) の下にあるすべてのオプションを抽出し、それらを項目用の空の選択リスト (上記の 3 番目のリスト) に追加します。

選択リストを一度に抽出して保存する方が効率的かもしれないので、ajax または JSON オプションを使用したくありません。

jQueryを使用して前述の機能を実現するにはどうすればよいですか?

4

2 に答える 2

0

問題を解決するために次のスクリプトを試してみましたが、うまくいっているようです

$(document).ready(function(){   

    $("#catKey").focus(
        function()  {
        $("#itemKey").empty();
        $("input").css("font-style", "italic");
    }
    );
    $("#catKey").change(onSelectChange);
});


function onSelectChange()   {
    $catSelected = jQuery('#catKey option:selected').val();
    $("#itemKey").empty();
    $('#itemKeys optgroup[label= ' + $catSelected + ']').children().clone().appendTo("#itemKey");

    /*
    $("#itemKey").append($('#itemKeys optgroup[label= ' + $catSelected + ']').children());
    */
}
于 2012-04-05T07:18:48.990 に答える
0

jQuery を使用してこれを実装する最も簡単な方法は、セレクターを使用することだと思います。次のような HTML を生成するだけです。

<select id="myCategories">
  <option value="cat1">Category 1</option>
  <option value="cat2">Category 2</option>
</select>
<select id="myItems">
  <option OPTGROUP="cat1">item 1</option>
  <option OPTGROUP="cat2">item 2</option>
  <option OPTGROUP="cat1">item 3</option>
</select>

そしてあなたのJavaScriptコード：

var $myCategories = $(select#myCategories);
var $myItems = $(select#myItems);
// you can start with all options hidden
$myItems.find('option').hide();

myCategories.change(function() {
// we hide all options
  $myItems.find('option').hide();
// we show the categoies options
  $myItems.find('option[OPTGROUP="' +myCategories.val()+ '"]').show();
})

このコードをテストしていませんが、アイデアを提供します

于 2012-04-04T19:13:41.227 に答える