0

I am sorry if this has been asked before but I've searched and failed to come up with a solution. I'm displaying a list of data in my view and in each row of the list are 2 dropdownlists one for category and the other for item. The 2nd dropdown is populated based on what is selected in the first dropdown. This only works for the first row in the list. How can I make this work for each row in the list? Here is my View:

    @for (int j = 0; j <= 9; j++)
    {
        <tr>
            <td>
                <input type="checkbox" name="i" value="@j">@(j + 1)</td>

            <td>
                @Html.DropDownList("dropdownCountry", new SelectList(string.Empty, "Value", "Text"), "Please select a Category", new {@style = "width:250px;"})
            </td>


            <td>

                @Html.DropDownList("dropdownState", new SelectList(string.Empty, "Value", "Text"), "Please select an Item", new {@style = "width:250px;"})

            </td>
            <td>
                <input size="10" type="text" name="quantity" style="width: 100px"/></td>
            <td>
                <input size="10" type="text" name="unitofMeasure" style="width: 100px" maxlength="10"/></td>
            <td>
                <input size="10" type="text" name="packsize" style="width: 100px"/></td>

            <td>
                <input size="10" type="text" name="unitPrice" style="width: 100px"/></td>
        </tr>
    }   
    <tr>
        <td></td>

        <td>
            <input type="submit" value="Create" name="Command" /></td>
        <td></td>
        <td></td>
    </tr>
</table>

And here is my Script:

@section Scripts
{

<script src="~/scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        $.ajax({
            type: "GET",
            url: "/ProcurementRequistion/GetItemcategories",
            datatype: "Json",
            success: function(data) {
                $.each(data,
                    function(index, value) {
                        $('#dropdownCountry')
                            .append('<option value="' + value.Code + '">' + value.Description + '</option>');
                    });
            }
        });

        $('#dropdownCountry')
            .change(function() {

                $('#dropdownState').empty();

                $.ajax({
                    type: "POST",
                    url: "/ProcurementRequistion/GetItemsByItemCategoryCode",
                    datatype: "Json",
                    data: { itemCategoryCode: $('#dropdownCountry').val() },
                    success: function(data) {
                        $.each(data,
                            function(index, value) {
                                $('#dropdownState')
                                    .append('<option value="' + value.No + '">' + value.Description + '</option>');
                            });
                    }
                });
            });
    });
</script>
}
Vasily Kabunov
  • 6,511
  • 13
  • 49
  • 53
mai
  • 1
  • You generating duplicate `id` attributes which is invalid html. But your form controls including the checkbox and textboxes are generating duplicate name attributes as well, so you code could never bind to anything. What are you trying to achieve with this? To make any sense of it you need to populate your model with 9 items and use `for(int i = 0; i < Model.Count; i++) { @Html.CheckBoxFor(m => m[i].someProperty) @Html.DropDownListFor(m => m[i].AnotherProperty, Model.yourSelectList)` etc. –  Mar 13 '17 at 06:49
  • And then your dropdownlists need class names and you use relative selectors. –  Mar 13 '17 at 06:50
  • Thanks.. Got it working now – mai Mar 15 '17 at 09:20
  • I suspect what you really want is to dynamically add your objects to the collection as required (e.g. the user might want to add 2 or 5 or 9). Suggest you read [this answer](http://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) –  Mar 15 '17 at 09:22

0 Answers0