1

動的フォームの Web ページがあります。これにより、ユーザーはデバイスに任意の数の属性を指定できます。これらの属性は、選択オプション リストにすることができます。ユーザーがこれを選択すると、オプションを追加するためのボタンが表示されます。

私の問題は、各属性にいくつのオプションがあるかを知る必要があることです。私はそれが機能するかどうかを確認するためにvar counter=$('.class-name').next().val();それらを試してみましalert(counter);た。しかし、私が得るのは未定義のアラートだけなので、var カウンターは初期化されていません。

各選択リストのオプションの数を把握して、選択リストをグループ化し、特定の属性に対応するオプションを把握する必要があります。JS や PHP でこれを行う方法が思い浮かびません。php に投稿されたオプションを取得できますが、各属性にどのオプションを使用するかを特定できません。

ここにフィドルがあります！

4

1 に答える 1

0

各オプションの長さを取得するコードは次のとおりです。

$('.tattribute option:selected[value="text"]').length
$('.tattribute option:selected[value="checkbox"]').length
$('.tattribute option:selected[value="select-list"]').length
$('.tattribute option:selected[value="notes"]').length

フィドル

これは、オプション数を追跡するために追加された隠しフィールドを備えたフィドルです。オプションが追加または削除されるたびに、非表示フィールドの値が増加または減少します。変更は以下のコードにあります

var template="<div class=\"new-attribute\">"
                 + "<h3>New Attribute</h3>"
                 + "<label for=\"attributeName[]"+"\">Name:</label>"
                 + "<input class=\"attribute\" type=\"text\" name=\"attributeName[]"+"\">"
                 + "<input class=\"attribute_count\" type=\"hidden\" name=\"attributeCount[]"+"\">"
                 + "<label for=\"attributeType[]"+"\">Type:</label>"
                 + "<select class=\"tattribute\" name=\"attributeType[]"+"\">"
                 + "<option value=\"text\" selected>Text</option>"
                 + "<option value=\"checkbox\">Checkbox</option>"
                 + "<option value=\"select-list\">Select Option List</option>"
                 + "<option value=\"notes\">Notes</option>"
                 + "</select>"
                 + "<div class=\"option\"></div>"
                 + "<button type=\"button\" class=\"remove\">Delete</button>"
                 + "</div>";

と

//Add action
    $("#attributes").on('click', '.btn', function () {
        add = "<div class=\"op\"><label for=\"attributeOption[]" +"\">Name:</label>" 
        + "<input class=\"option-input\" type=\"text\" name=\"attributeOption[]" + "\">"
        +"<button type=\"button\" class=\"remove-option\">remove</button></div>";
        $(this).after(add); 
        //COUNT NUMBER OF OPTIONS
        $opt = $(this).closest('.option')
        $opt.siblings('.attribute_count').val($opt.find('.op').length)
        alert($opt.siblings('.attribute_count').val());
    });

    //Remove input
    $("#attributes").on('click', '.remove-option', function () {
            $(this).closest('.op').remove();
            $opt = $(this).closest('.option')
            $opt.siblings('attribute_count').val($opt.find('.op').length)
    });
于 2013-09-03T12:59:03.837 に答える