How to Selected an Item in dropdownliast using ajax

Question

0.00/5 (No votes)

See more:

Dear Experts,

I am Using Ajax Json in asp.net. Here is the below code of Ajax Json that i am used......

JavaScript

$.ajax(
      {
        type: "POST",
        url: "../../WebService.asmx/populate_Country",
        dataType: "json",
        data: {},
        contentType: "application/json; charset=utf-8",
        success: function (json) {

         var xmlDoc = "";
         var xml = "";
         xmlDoc = $.parseXML(json.d);
         xml = $(xmlDoc);
               
         document.getElementById("ddl_Country").innerHTML = "";

         $(xml).find("Table1").each(function () {
         var County_ID = $(this).find("Country_ID").text();
         var County_Name = $(this).find("Country").text();
         var County_Selected = $(this).find("Default_Selection").text();

         $("#ddl_Country").append("<option value='" + County_ID + "' selected='" + County_Selected + "'>" + County_Name + "</option>");

                        });
                    }
                });

And here is the below HTML Code,

HTML

<select id="ddl_Country" name="validation-select" class="select expandable-list validate[required]">

</select>

And these are the datas from database..

CSS

Country_ID    Country         Default_Selection
  
1             Canada              NULL    
2             United States       NULL   
3             Belgium             NULL  
4             Australia           NULL    
5             New Zealand         NULL 
6             India               Selected

And i want to populate these datas in dropdownlist....

These codes are working fine, but Country India is not selected......

When i hard coded these datas in the source, then the India will be selected...

Please Help me..

Thanks and Regards,

Dileep..

Posted 4-Apr-13 1:16am

dilzz

Add a Solution

Comments

ZurdoDev 4-Apr-13 7:18am

So, view the source and see what is happening.

dilzz 4-Apr-13 7:24am

In source , we can't see any changes made... when we check in the Inspect Element, there we can see the changes.... I think the source is not changed, so it is not yet selected.. then is there any way to print the data's in html page, and that we want to affect in page source also.....

3 solutions

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)

pradiprenushe · Answer 1 · 2013-04-04T01:31:00

Solution 1

Try this (check space in database value or use trim)

JavaScript

if(County_Selected == "Selected")
{
$("#ddl_Country").append("<option value="" + County_ID + "" selected>" + County_Name +"</option>");
}
else
{
$("#ddl_Country").append("<option value="" + County_ID + "">" + County_Name +"</option>");
}

Posted 4-Apr-13 1:31am

pradiprenushe

Updated 4-Apr-13 2:07am

v3

Comments

dilzz 4-Apr-13 8:06am

Sir, is there any way to print in html, and affected in page source also..... currently when i print the data in html page using the above code, it will be affected in page element, can't see the code in page source... i think the selected property is not working....

Thanks

Dileep

pradiprenushe 4-Apr-13 8:12am

Rather than selectde="india" use just seleced look in what is change in my answer your code.
I have just set selected attribute of single option.
http://www.w3schools.com/tags/att_option_selected.asp
Look for tag of select control you will get idea.

Palash Mondal_ · Answer 2 · 2013-04-04T21:37:00

Solution 2

Try this:

C#

var $option = $("<option value='" + County_ID + "'>" + County_Name + "</option>");

if (County_Selected == "Selected") {
    $option.attr('selected', 'selected');
}

$("#ddl_Country").append($option);

Posted 4-Apr-13 21:37pm

Palash Mondal_

Updated 4-Apr-13 21:42pm

v3

Rekhash · Answer 3 · 2013-04-06T01:56:00

Solution 3

Try This Link

http://www.c-sharpcorner.com/uploadfile/b19d5a/handling-dropdownlist-with-ajax-in-Asp-Net/[^]

ASP.NET Multiple Selection DropDownList with AJAX HoverMenuExtender[^]

Posted 6-Apr-13 1:56am

Rekhash