How to trigger dynamic dropdown in Edit View

I am new to web development and I just learned Jquery to create dynamic dropdowns. The problem that I am facing is that my dropdowns are not being updated when I go to the edit view.

So I have been able to successfully create dynamic dropdowns for my Create view (see code).

Create.cshtml:

<div class="form-group col-md-4" id="drop_1">
    <label asp-for="Option_1" class="control-label"></label>
    <select asp-for="Option_1" class="form-control" id="opt1">
         <option value="">Select Option</option>
         <option value="A">A</option>
         <option value="B">B</option>
         <option value="C">C</option>
         <option value="D">D</option>
    </select>
    <span asp-validation-for="Option_1" class="text-danger"></span>
</div>

<div class="form-group col-md-4" id="drop_2">
    <label asp-for="Option_2" class="control-label"></label>
    <select asp-for="Option_2" class="form-control" id="opt2">
         <option value="">Select Option</option>
    </select>
    <span asp-validation-for="Option_2" class="text-danger"></span>
</div>

<div class="form-group col-md-4" id="drop_3">
    <label asp-for="Option_3" class="control-label"></label>
    <select asp-for="Option_3" class="form-control" id="opt3">
         <option value="">Select Option</option>
    </select>
    <span asp-validation-for="Option_3" class="text-danger"></span>
</div>

Edit.cshtml is the same as Create.cshtml

Site.js:

$(function() {
    $('#opt3').change(function () {
        var x = $(this);
        if (x.val() == "") {
            $('#drop_2').hide();
            $('#drop_3').hide();
        }
        else {
            if (x.val() == "A") {
                $('#opt2').find('option').remove().end();
                $('#opt2').append('<option value="D">D</option>');
                .
                .
                . etc.
            }
        }
        //Same for the remaining dropdowns
    });
});

The point is that my dropdowns work when I start clicking on my dropdowns. But what I would like to see is that when I try to go into my edit views and the data is pulled in, the dropdowns automatically get changed based on whatever data there is for dropdown 1 and 2, without the user having to reselect dropdown 1 and 2.

Answer

The change event is sent to an element when its value changes. If you want to make the dropdownlist changes when page is loading the first time , you can write your javascript methods directly in $(function () {}); . For example , if you want to add D option to select 2 after loading edit views :

<script>
    $(function () {

        $('#opt2').append('<option value="D">D</option>');

        //write your other logic here 



        $('#opt3').change(function () {                                                                                             
            var x = $(this);                                                                                                
            if (x.val() == "") {
                $('#drop_2').hide();
                $('#drop_3').hide();
            }
            else {
                if (x.val() == "A") {
                    $('#opt2').find('option').remove().end();
                    $('#opt2').append('<option value="D">D</option>');

                }
            }
            //Same for the remaining dropdowns
        });
    });

</script>

Leave a Reply

Your email address will not be published. Required fields are marked *