DropDownList multiple data

Question

I'm working in asp mvc c#

Now in my acp panel I have a dropdownlist:

        @Html.DropDownList("id", new SelectList(ViewBag.DruhyOdznaku, "Id", "Name"), new {@onchange = "functionChange()", @class = "form-control", id = "ddlViewBy"})

I can access the name value of selected item from JS like:

    function functionChange() {
        var e = document.getElementById("ddlViewBy");
        var finalData = e.options[e.selectedIndex];
    }

Now the problem is I want to keep displaying name in the dropdown but obtain another value - in this case "Text" (from db).

How can I attach this data to the dropdown (ideally keep the way it's created) and then get them from js? Spent a day on this, my sanity going low.

Thanks a milion for help.

you mean you want to add another option to the dropdown? Use JS to add another ` — ADyson, Jan 23 '18 at 15:45
Could you please provide me an example? Thanks a lot for your time. — , Jan 23 '18 at 15:47
And I don't mean option: Dropdown: "Name 1" "Name 2" After clicking Ill get something like: "Text 1" "Text 2" — , Jan 23 '18 at 15:48
Sorry that doesn't clarify anything, give a clear example of what you want to do — ADyson, Jan 23 '18 at 15:49
I mean that I am able to attach one data via SelectList method to dropdown and obtain it. But I need to attach another data (and still keep the first) and obtain it. Hope it's clear now — , Jan 23 '18 at 15:53
where does this additional data come from? The server? If so then make an ajax request to fetch it, and then add an option tag to your HTML containing that data — ADyson, Jan 23 '18 at 15:58

score 0 · Accepted Answer · answered Jan 23 '18 at 15:54

0

You can add a "data-" attribute on options. Have a look at this to see how to SelectListItem with data-attributes

But that "ideally keep the way it's created" is not going to hold.

Then you can have something like this:

$(document).ready(function(){
$("#sel").change(function(){
var selectedOption = $(this).find("option:selected");
alert(selectedOption.attr("value") + "/" +
      selectedOption.data("text") + "/" +
      selectedOption.html() );
  })
})

answered Jan 23 '18 at 15:54

Lidaranis

765
3
9

I've looked into this before asking but I dont know how to add that data-atr with @Html.DropDownList – Jan 23 '18 at 15:56
I don't know if it's possible with @Html.DropDownList without creating your own custom helper. That's why i added the "how to" link. Or how ADyson said in the comments.. you could make a separate ajax request to fetch the additional data and then get it from the result when you need it, based on the selected option. – Lidaranis Jan 23 '18 at 16:02
Lindaris, just a note. I'm quite unsure what to do with lines: @Html.NameFor(Function(model) model.CityId)" id="@Html.IdFor(Function(model) model.CityId)" from solution you've offered me. Dunno how to replace Function(model) model.CityId Could it be like: x => x.Id for the id? – Jan 23 '18 at 16:25
I did not test that but x => x.Id looks about right. – Lidaranis Jan 25 '18 at 13:22

DropDownList multiple data

1 Answers1