Click here to Skip to main content
15,665,718 members
Please Sign up or sign in to vote.
2.00/5 (2 votes)

I am not able to bind the dropdownlist by jquery json binding. But while inspecting browser i can see the data. But not binding to dropdown. Please help me.

inspect code :

d: [,…]
0: {__type: "dropdown.WebService1+CountryDetails", CountryId: "211249", CountryName: " New Bolt & Tools"}
CountryId: "211249"
CountryName: " New Bolt & Tools"
__type: "dropdown.WebService1+CountryDetails"


i need the countryname to bind

<script type="text/javascript">
    $(document).ready(function () {
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WebService1.asmx/BindDatatoDropdown",
            data: JSON.stringify({ bCode: '<%=branchCode %>', stcon: '<%=strCon %>' }),
            dataType: "json",
            success: function (data) {
                $.each(data.d, function (key, value) {
            error: function (result) {

Updated 27-Apr-16 5:25am
Sergey Alexandrovich Kryukov 27-Apr-16 9:40am    
Do you mean that data already contains correct items when success function is called? Are you sure the elements have properly filled in properties CountryId and CountryName?

If so, what's the problem? Debug appending items to a select element separately and add right code. But why not writing it all in some neat manner? Look what you are doing: not only in each call to success, but even on each iteration of the loop traversing data, you keep calling the same very $("#dllCountryx"), which is essentially document.GetElementById. Write code accurately, and you will get rid of many problems.

One problem: do you ever clear $("#dllCountryx") elements? Should your code work, on second Ajax request you will have more items in addition to the existing ones.

By the way: if the word "binding" came in fashion, it does not mean that you should call all you do "binding". :-)
F-ES Sitecore 27-Apr-16 10:24am    
We can't debug your code remotely, use the "debugger" keyword to step through the code or try and use the console or alert boxes to track progress through the code.

Things I would look at are a) are there errors in the console? b) does the BindDatatoDropdown method get called and return results c) does your "success" method get called? d) what is in data.d, are there items there, does data.d.length have a value greater than zero? e) is your "each" called? f) is there an element on the page (view view->source, not on your aspx page in Visual Studio) with an id of "ddlCountryx" g) do value.CountryId and value.CountryName have values?

Just from looking at the code, however, the issue might be that you're not parsing data.d into JSON objects.

Edit: Also if this is an asp:DropDownList then don't even bother trying to do what you're doing, it won't work.
Sergey Alexandrovich Kryukov 27-Apr-16 11:26am    
You are right, but the bug is obvious enough; please see Solution 1.
I don't know exactly about JSON; the inquirer maintains that the data is in place and correct — be it this way. :-)
F-ES Sitecore 27-Apr-16 11:55am    
There is nothing wrong with how he is populating the select, as long as value.CountryId and value.CountryName are returning values then they will appear as valid options. Saying the option doesn't need a value is a strange thing to say as well as the value is what is returned when the form is posted.
Sergey Alexandrovich Kryukov 27-Apr-16 13:26pm    
No. Look thoroughly — it's a bug. When you set val, text won't appear. Try it and you will see.
And of course option does not need a value, by one reason you are missing: you can set some arbitrary property, "superPuperValue", and it will work, JavaScript to JavaScript. It's just makes no sense, because there is "value", but it's not strange. "Form posted" is nothing but your assumption. Yes, you are right, but if data is posted as Ajax, it's irrelevant. I don't disagree, the straightforward way it to use "value", and I said it in my answer; I just make a correct statement about the role of this property.

1 solution

Please see my comment to the question.

The first bug I can see is using val. It means that you try to set the value of the value property of the element option. You certainly can do it, but this property has no significance to this element, in terms of visible HTML DOM. It can be used to pass data from a selected option to the script, and can be any object. You don't have to use it, can use any other new property; it's important to pass data from HTML which you don't write but create on the fly. In other words, you don't do anything you have to.

You probably need to add two to four things: the option text, and, optionally, one or more of the following attributes: id, value and selected. Please see: option — HTML | MDN[^].

The simplest way to add the option text is using innerHTML of this (or any other elements). In your simple case, this is enough. On top of that, you can add attributes, which can be done by using the save very val (for value) and, say, jQuery .attr():
.attr() | jQuery API Documentation[^].

Basically, that's all.

Share this answer

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900