How to populate the dropdown list with JASON

Question

1.00/5 (1 vote)

See more:

, +

JavaScript

<script type="text/javascript">
    $("#ReportId").change(function () {
        $.ajax({
            url: "/RLMaster/GetHeadName",
            data: { ReportId: $('#ReportId').val() },
            type: "GET",
            dataType: "json",
            success: function (data, textStatus) {
                alert(data);
                loadData(data);
            },
            error: function () {
                alert("Failed! Please try again.");
            }
        });
    });
</script>

This is my Javascript. I am able to retrieve data from database but unable to populate my DropDown List with that data.
Please help. Also tell me the HTML which I should write for the dropdown

Posted 31-Aug-15 2:01am

Member 11579819

Updated 31-Aug-15 3:02am

Herman<T>.Instance

v3

Add a Solution

Comments

Amit Jadli 31-Aug-15 8:20am

you could use normal dropdownlist and access it from jquery and append options in it like below.
$('#dropdownId').append('<option value="+value+">"+text+"</option>');
loop through the values if it is more then one.

Member 11579819 31-Aug-15 8:26am

Ahh..Ok
And how to write that dropdown list command in html with null values. I am very new to this and yet I have used dropdown only with Viewbags.
If possible please elaborate your answer. That would be a great help for me

Amit Jadli 31-Aug-15 8:31am

<asp:DropDownList ID="drpList" runat="server">
<asp:ListItem Value="">Select

if you are using asp.net webforms this is the code of HTML for dropdownlist..

Member 11579819 31-Aug-15 8:40am

I am using Razor actually

Amit Jadli 31-Aug-15 8:44am

<select id="selCountry"><option value="0">Select</option></select>

Member 11579819 31-Aug-15 8:46am

Thanks

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suket shah · Accepted Answer · 2015-08-31T03:44:00

Hi,

You can do with below code

1) first add below in html

@Html.DropDownList("ddldrpid", new SelectList(new List<selectlistitem>()), "Select State/Province")

2) now return selectlistitem from controller(make sure that its return List<selectlistitem> from json request).

3) After that in sucess part do it below code to bind drop down:

if (data.length > 1) {
               $("#ddldrpid").empty();

               var selectList = $("#ddldrpid");
               $.each(data, function (index, item) {
                   selectList.append($('<option />', {
                       value: item.Value,
                       text: item.Text,
                   }));
               });
           }

like that way you can bind drop down using jason result.

let me know if you need more help.