Solved

binding sql server data to a html Select

Posted on 2014-02-24
2
1,375 Views
Last Modified: 2014-02-25
I saw this example, it's close to what I need but not exactly.

Binding to a SELECT
http://samples.msdn.microsoft.com/workshop/samples/author/databind/dbselect.htm

Anyone know of a example where I bind either XML or JSON data to a HTML select?

I'm getting the data from sql server and generating an xml or json file and then I want to bind that to an HTML select.
0
Comment
Question by:maqskywalker
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39885349
Assume your json looks like
http://jsbin.com/fibohece/1.js
{
    "country": "France"
}

Open in new window

Your html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<select datasrc="#tdcComposer" datafld="origin">
<option value="Austria">Austria
</option><option value="France">France
</option><option value="Germany">Germany
</option><option value="Italy">Italy
</option><option value="Russia">Russia
</option></select>
 
</body>
</html>

Open in new window

jquery
// Sample data http://jsbin.com/fibohece/1.js
$(function() {
$.getJSON("/fibohece/1.js", function (data) {
    var origin = data.country;
    $("select[datafld='origin']  option").each(function () {
        if ($(this).val() === origin) {
            $(this).prop('selected', true);

        }
    });


});
});

Open in new window

Working sample http://jsbin.com/hikexefa/1/edit using the url for json http://jsbin.com/fibohece/1.js.  If you are accessing a url from a different domain, you have to use jsonp instead of json.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question