1

外側のコンボ ボックスの変更イベントでカスケード コンボ ボックスを取得しようとすると問題が発生します。テーブルから行を追加および削除できるため、任意の数の行が存在する可能性があります。各行の中に 2 つのコンボ ボックスがあります。1 つは顧客用、1 つは連絡用です。その顧客の有効な連絡先を移動してプルする顧客コンボ ボックスで発生する変更イベントがあります。以下はテーブルのhtmlです

<tr class="ClassAttendee">      
<td>
    <select class="Customers valid" id="Attendees_0__Customers"
    name="Attendees[0].Customers">    
        <option value="1517">Woodstock</option>
        <option value="1518">Woolwich</option>
        <option value="1519">Yarmouth</option>
        <option value="1520">York</option>
    </select>
</td>
<td>
     <select class="Contact">
         <option value="">Choose Attendee...</option>
     </select>
</td>
<td>
     <input data-val="true" data-val-required="The Attended field is required."
     id="Attendees_0__Attended" name="Attendees[0].Attended" type="checkbox"
     value="true"><input name="Attendees[0].Attended" type="hidden" value="false">
     <span class="field-validation-valid" data-valmsg-for="nestedObject.Attended" data
     -valmsg-replace="true"></span>
</td>
<td>
     <input class="FeePaid" data-val="true" data-val-required="The Fee Paid field is
     required." id="Attendees_0__FeePaid" name="Attendees[0].FeePaid" type="checkbox"
     value="true"><input name="Attendees[0].FeePaid" type="hidden" value="false">
     <span class="field-validation-valid" data-valmsg-for="nestedObject.FeePaid" data
     -valmsg-replace="true"></span>
</td>
<td>
     <input class="CheckNumber" id="Attendees_0__CheckNumber"
     name="Attendees[0].CheckNumber" type="text" value="">

     <span class="field-validation-valid" data-valmsg-for="nestedObject.CheckNumber"
     data-valmsg-replace="true"></span>
</td>
<td>
    <input class="mark-for-delete" data-val="true" data-val-required="The Delete field
    is required." id="Attendees_0__Delete" name="Attendees[0].Delete" type="hidden"
    value="False">

    <a href="#"
    onclick="javascript:removeNestedForm(this,'tr.ClassAttendee','input.mark-for
    -delete');return false;">Remove</a>
</td>
</tr>

各行は次のように表示され、最初の 2 つのセルにはドロップダウンが含まれています。1 つ目は顧客用、2 つ目は連絡先用です。$("Contact") のセレクターを使用するだけで、コンボ ボックスを正しいオプションで更新できるので、これが機能することはわかっていますが、そのセレクターを使用するとすべての行が更新されるため、行を指定する必要があります。

?以下は私が使用しようとしているJQueryです

 $('.Customers').change(function (e) {
        var selectedCustomer = $(this).val();
        if (selectedCustomer != null && selectedCustomer != '') {
            $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) {
                var contactSelect = $(this).parent().next().children(".Contact");
                contactSelect.empty();
                $.each(contacts, function (index, contact) {
                    contactSelect.append($('<option/>', {
                        value: contact.ID,
                        text: contact.Name
                    }));
                });
            });
        }
    });

私が問題を抱えている特定の行は

var contactSelect = $(this).parent().next().children(".Contact");

これを使用する代わりにセレクターを使用して最初に顧客ドロップダウンボックスを選択し、次に行の残りを使用すると、連絡先ドロップダウンを選択できます。これが機能しない理由がわかりません。また、このオブジェクトを使用できない場合に、変更イベントで扱っている行の特定のドロップダウン リストを選択する方法についても考えがありません。

どんなアイデアでも大歓迎です。

4

2 に答える 2

2

これは古典的な問題です：ほとんどのコールバックthisに使用される関数呼び出しのコンテキストを指します。window

解決策 ：

    if (selectedCustomer != null && selectedCustomer != '') {
        var that = this;
        $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) {
            var contactSelect = $(that).parent().next().children(".Contact");
于 2012-12-11T20:03:25.263 に答える
0

クロージャーを使用してみてください：

$('.Customers').change(function (e) {
    var selectedCustomer = $(this).val();
    if (selectedCustomer != null && selectedCustomer != '') {
        (function(el) {
            $.getJSON('@Url.Action("GetAllSelectedCustomer", "CustomerEmails")', { id: selectedCustomer }, function (contacts) {
                var contactSelect = $(el).parent().next().children(".Contact");
                contactSelect.empty();
                $.each(contacts, function (index, contact) {
                    contactSelect.append($('<option/>', {
                        value: contact.ID,
                        text: contact.Name
                    }));
                });
            });
        })(this);
    }
});
于 2012-12-11T20:03:54.060 に答える