0

I have an application that allows users to edit the reason and next action for a selected receiving discrepancy via 2 drops downs. One of the drop downs is simply hard coded directly into the HTML the 2nd one is being loaded via a quick JavaScript based on what value is in 1st drop down.

The first drop down has 14 options for reasons, each of which has 6-12 options for action steps. If user changes first drop down reason selection, it has to go back to SQL db and retrieve the appropriate list of action step options to use for 2nd drop down.

All of that works.

The problem I'm having is when the user first selects a discrepancy to edit. At that time it loads the view and based on the value stored on SQL DB it sets the value of the 1st drop down, and then runs java to first empty, then append new list of options to 2nd drop down.

What I can NOT get to work is having it set the value of the 2nd drop down, after that java is ran to create list of options, once again trying to set it based on the value stored on SQL DB for that discrepancy.

If I hard code the 2nd list of options the same as first list, and don't have it use java to re-load it until the first drop down is changed, then I can set the value the same way I do the first one. The problem there is then the 2nd drop down would have about 30-40 options listed, until you change first drop down - only 6-12 of which would be accurate for that specific reason selected.

The way I originally set the 2 drop down values, when both lists were hard coded (still works on first drop down):

<script>
    // script to set drop down values to those stored on DB after document finished loading
    document.getElementById("ReasonDD").value = "@Model.DiscReason";      
    document.getElementById("NextActionDD").value = "@Model.NextAction";
</script>

Script used to change 2nd drop down if first one is changed (again works fine):

$(function () {
        $("#ReasonDD").change(function () {

            var option = $(this).val();
            $("#NextActionDD").empty();

            var url = "GetActionValues?selectedOption=" + option;

            $.post(url, function (actValues) {
                $.each(actValues, function (i, actValue) {
                    $("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
                });
            });
        });
    });

This script is one being ran when discrepancy is first selected, it is correctly loads 2nd drop down but I've tried all 3 shown ways both together and individually to set the value but none have worked so far. The console.log shown has a valid choice equal to one of the values loaded into 2nd drop down:

 $(function () {
        var reasonLoad = "@Model.DiscReason";
        if (reasonLoad > "") {

            var option = reasonLoad;
            $("#NextActionDD").empty();

            var url = "GetActionValues?selectedOption=" + option;

            $.post(url, function (actValues) {
                $.each(actValues, function (i, actValue) {
                    $("#NextActionDD").append($('<option></option>').val(actValue).html(actValue));
                });
            });

            console.log("@Model.NextAction");

            $("#NextActionDD").val = "@Model.NextAction";
            $("#NextActionDD").value = "@Model.NextAction";
            document.getElementById("NextActionDD").value = "@Model.NextAction";
        }
    });

I've now also tried Rajesh G's idea of:

  $('#NextActionDD option[@Model.NextAction]').attr('selected','selected');

I added it directly after my console.log("@Model.NextAction") and instead of and commented out the other 3. Ran 2 test with both and 2 with it instead of console.log line, total of 4 tests.

On 2 tests with console.log on the console showed the "@Model.NextAction" values to be "Other" and "Wait for Vendor Response" but then gave the same error message all 4 times (both times with console.log and both times with it replaced) of:

Error: Syntax error, unrecognized expression: #NextActionDD option[Close Discrepency]

Although Close Discrepancy isn't the @Model.NextAction value, but was the last option appended to the list of options for the #NextActionDD dropdown

Bert
  • 35
  • 1
  • 1
  • 9
  • [Here](https://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view) is a more conventional way to deal with it. – Steve Greene Dec 27 '19 at 20:47
  • That "conventional way" doesn't show setting the selected/default index/value of the 2nd drop down after clearing and appending values, it just discusses different methods of setting the list of available values... – Bert Dec 28 '19 at 00:04
  • 1
    try this way $('#NextActionDD option[@Model.NextAction]').attr('selected','selected'); – Rajesh G Dec 28 '19 at 03:13
  • Thanks for idea Rajesh didn't quite solve it though. Added results above... – Bert Jan 03 '20 at 16:48

0 Answers0