locked
Fill drop down list on selection of another drop down list RRS feed

  • Question

  • User982203039 posted

    I want to change the category list depending on the department selected. The code below does that fine on the create page, my issue is that on my edit page it does not show the correct values from the database. I know how to correct this using ViewBags from the controller, but I don't know to dynamically change the selection of the category depending on the value of the department using viewbags. Does that make sense?

    Thanks!

    <div class="form-group">
            @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select name="Department" id="Department">
                    <option value="IT">IT</option>
                    <option value="Sales">Sales</option>
    			</select>
            </div>
    </div>
    				
    	  <div class="form-group">
            @Html.LabelFor(model => model.Catagory, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
           <select name="Catagory" id="Catagory">
                    <option id="IT" value="N/A">N/A</option>
                    <option id="Sales" value="N/A">N/A</option>
                    <option id="Sales" value="Boats">Boats</option>
    				<option id="Sales" value="RVs">RVs</option>
    				<option>
            </select>
          </div>
     </div>

    Thursday, July 23, 2020 2:40 PM

All replies

  • User475983607 posted

    my issue is that on my edit page it does not show the correct values from the database. I know how to correct this using ViewBags from the controller, but I don't know to dynamically change the selection of the category depending on the value of the department using viewbags. Does that make sense?

    It is not clear why the design works in one page but not another.  

    Thursday, July 23, 2020 3:18 PM
  • User982203039 posted

    The create page does not have any database values yet so there is no data. I am choosing new values. The edit page already has database values but they are not populating in the droplist. It is populating the first selection of the list.

    Thursday, July 23, 2020 3:42 PM
  • User475983607 posted

    The create page does not have any database values yet so there is no data. I am choosing new values. The edit page already has database values but they are not populating in the droplist. It is populating the first selection of the list.

    Is your question how to populate the selected option stored in a table somewhere?  Keep in mind we cannot see your tables, models, code, or anything related to populating the edit page.

    Thursday, July 23, 2020 3:49 PM
  • User982203039 posted

    I have 2 selections on my edit view.  Let's say I am editing a database record and the database stored values are  Department = "Sales"  and Category = "RVs"

    When the edit view opens the Department Selection list shows "IT" and the Category Selection list shows "N/A", the first selection: <option id="IT" value="N/A">N/A</option>.

    How do I do 2 things:

    • How can I display the correct database values on the edit view. In this example the selection values for Department would be "Sales" and the value selected for Category would be "RVs"
    • When editing when I select the drop list for Category how can I get only the categories for the selected Department to show.

    Maybe I can't do it this way. I am not sure.

    Here is the code from the edit page for 2 selections.

    <div class="form-group">
            @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                <select name="Department" id="Department">
                    <option value="IT">IT</option>
                    <option value="Sales">Sales</option>
    			</select>
            </div>
    </div>
    				
    	  <div class="form-group">
            @Html.LabelFor(model => model.Catagory, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
           <select name="Catagory" id="Catagory">
                    <option id="IT" value="N/A">N/A</option>
                    <option id="Sales" value="N/A">N/A</option>
                    <option id="Sales" value="Boats">Boats</option>
    				<option id="Sales" value="RVs">RVs</option>
    				<option>
            </select>
          </div>
     </div>

    Here is the controller:

            public ActionResult EditDocument(int id)
            {
               
    
                var document = db.Documents.Find(id);
                if (document == null)
                {
                    return HttpNotFound();
                }
                
                return View(document);
            }



    Thursday, July 23, 2020 4:10 PM
  • User475983607 posted

    Dude, your code makes little sense.  You are sharing hard coded selects, Department and Category, and an Action that queries a Documents table.  how is the community supposed to figure out the intention? 

    How can I display the correct database values on the edit view. In this example the selection values for Department would be "Sales" and the value selected for Category would be "RVs"

    I don't understand the problem.  If you are editing a record then you already have the Department ID and the Category ID.

    When editing when I select the drop list for Category how can I get only the categories for the selected Department to show.

    I have no idea.  You still ave not provided enough information to figure out how Department is related to Category.  but you should have both IDs so you should be able to execute a query to get Department -> Categories. 

    Thursday, July 23, 2020 4:52 PM
  • User1686398519 posted

    Hi Baze72,

    1. According to your needs, I modified your code, please refer to it.
      • Since you did not give your model and the relationship between the tables, I simply created a model called Person.
      • Use jquery to connect two drop down lists, and when the value of the department changes, the category changes together.
    2. The example above uses your original code as much as possible. If you can accept the use of "@ Html.DropDownListFor", you can refer to how to use "@ Html.DropDownListFor" to achieve your needs in this link.

    Model

        public class Person
        {
            [Key]
            public int id { get; set; }
            public string name { get; set; }
            public string number { get; set; }
            public string Department { get; set; }
            public string Category { get; set; }
        }

    Controller

            public ActionResult Edit(int? id)
            {
                if (id == null)
                {
                    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
                }
                var departmentlst = new List<string>();
                var departQry = from p in db.People orderby p.Department select p.Department;
                departmentlst.AddRange(departQry.Distinct());
                ViewBag.department = departmentlst;
                Person person = db.People.Find(id);
                if (person == null)
                {
                    return HttpNotFound();
                }
                return View(person);
            }

    View

    <div class="form-group">
        @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <select name="Department" id="Department" onchange="getcategory(this.value)">
                @foreach (var item in ViewBag.department)
                {
                    if (item != Model.Department)
                    {
                        <option id="@item" value="@item">@item</option>
                    }
                    else
                    {
                        <option value="@Model.Department" selected="selected">@Model.Department</option>
                    }
                }
        </select>
    </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            <select name="Category" id="Category">
                <option  value="@Model.Category">@Model.Category</option>                 
            </select>
        </div>
    </div>
    <script>
        var data = new Array();
        data["IT"] = ["N/A"];
        data["Sales"] = ["N/A", "Boats", "RVs"];
        function getcategory(index) {
            var obj = document.getElementById("Category");
            var cate;
            obj.options.length = 0;
            cate = data[index];
            for (var i = 0; i < cate.length; i++) {
            obj.options[i] = new Option(cate[i], cate[i]);
            }
        }
    </script>

    Here is the result.

    Best regards,

    Yihui Sun

    Friday, July 24, 2020 9:30 AM