0

ユーザーが SELECT 要素からオプションを選択できるインターフェイスを構築する必要があり、ユーザーが行った選択に基づいて、その場で要素を追加する必要があります。たとえば、次のような選択があるとします。

<select required="required" name="product_variation[variation]" id="product_variation_variation">
    <option value="1">Size</option>
    <option value="2">Color</option>
    <option value="3">Size & Color</option>
</select>

したがって、ユーザーが最初の選択肢を選択した場合、3 つの INPUT を表示して、このバリエーションを持つ製品の数量と価格の値を書き込むことができるようにする必要があります。オプション「サイズと色」の場合、この場合、オプションと同じ数の INPUT を生成する必要があります。

size: XL
size: L
size: M
color: Red

この場合、次のように 3 つの INPUT バリエーションを表示する必要があります。

INPUT1: size: XL color: Red 
INPUT2: size: L color: Red
INPUT3: size: M color: Red

このコードで私を助けることができますか? これまでのところ、メインの SELECT 要素から選択した値を選択する部分しかありません。

$("#product_create").on("change", "#product_variation_variation", function() {
    var that = $(this);
    var selected_item = that.find(":selected").val();

    if (selected_item === 1) {
        // build inputs for first option
    }   
});

アップデート

わかりました、少なくとも私にとっては、私が必要とするものはあなたが信じているよりも複雑であることを示すために、モックアップを作成しました。下の画像を参照してください。

フロー

ユーザーが「バリエーションはありますか?」をチェックしたときの画像に基づいています。これは簡単で、すでに行っています。ここで、ユーザーが select から何を選択するかに応じて、いくつかの入力要素を「オンザフライ」で記述する必要があります。基本的に初回は一行でいい意味

"Enter value for size 1" | "Enter price for size 1" | "Enter qty (quantity) for size 1"

前の選択に基づいてさらに行を追加するためのボタンがすぐ横にあることに気付いた場合、ユーザーがボタンをクリックすると、次のようになります。

"Enter value for size 1" | "Enter price for size 1" | "Enter qty (quantity) for size 1"
"Enter value for size 2" | "Enter price for size 2" | "Enter qty (quantity) for size 2"

など、「サイズを追加」ボタンをクリックするたびに。ユーザーが色を選択すると、同じフローが発生するはずです。

ここで難しい部分があります。ユーザーが画像に表示されているように「サイズと色」を選択した場合、最初にユーザーにサイズの値、次に色の値を尋ね、次に画像に示すようにそれらの値に基づいてバリエーションを作成する必要があります。終わり

これが私がやりたいことです

4

2 に答える 2

1

jquery の append または prepend を使用して要素を作成します。追加

http://api.jquery.com/append/

プリペンド

http://api.jquery.com/prepend/

フィドル

http://jsfiddle.net/NWWAG/

 $("#product_create").on("change", "#product_variation_variation", function() {
        var that = $(this);
        var selected_item = that.find(":selected").val();

        if (selected_item === 1) {
            $(".element").append('<input type="text" id="new-id" />'); //Appends
            $(".element").prepend('<input type="text" id="new-id" />'); //Appends
        }   
    });
于 2013-09-08T17:10:18.137 に答える