1

DropDownListとテキストボックスを持つRazorレイアウトでフォームを作成しています

この下に、「別の追加」リンクがあります。

これをクリックして、別のDropDownListとTextBoxのペアをdivに追加する必要があります（これを#socialNetworksと呼びましょう）

現在、私は「通常の」/ 1回限りのテキストボックスに対して次のようなjQueryを使用してこれを行います：

    var phoneFieldsIndex = 0;

    $('#addAnotherPhoneLink').click(function () {

        if ($('#phoneFields input:last').val()) {

            phoneFieldsIndex++;

            $('#phoneFields').append('<input name="phone[' + emailFieldsIndex + ']" type="text"><br />');

        }

    });

これは正常に機能します-addAnotherPhoneLinkで要素をクリックすると、別の入力ボックス（インデックスがインクリメントされます）がdiv#phoneFieldsに追加されます

DropDownList/入力ペアで同様のことをしようとしています

ただし、DropDownListの場合、現在次のものがあります。

@Html.DropDownList("SocialNetwork", new SelectList(Model.AvailableSocialNetworks))

<input name="Username" type="text" />

したがって、ここには2つの問題があることがわかります。

  • SocialNetworkDropDownListのインデックスを毎回インクリメントする必要があります
  • Model.AvailableSocialNetworksの値をそれぞれに複製する必要があります
4

1 に答える 1

1

jQuery を使用して、既存のselectリストの 1 つをコピーします (またはサーバーを使用して非表示のリストをテンプレートとして提供し、それをコピーします)。

var newSelect = $('#phoneFields select:first-child').clone()
   .attr("name", 'SocialNetwork[' + emailFieldsIndex + ']');

$('#phoneFields').append(newSelect);

インデックスは、同時にinput追加するボックスと同じになると思いますか?

于 2013-03-07T15:11:00.913 に答える