Reputation: 1895
Hi all i am appending data to a dropdown dynamically in my application but i have an error here ,the drop downs are created but the values are binded outside the dropdown can any one correct me here where am i doing wrong
if(product.oPTIONS.length>0)
{
alert(product.oPTIONS.length);
$.each(product.oPTIONS, function (idx, options) {
$("#productdetails").append('<label>' + options.OptionName + '</label>');
if(options.value.length>0)
{
var stringBuilder = [];
$("#productdetails").append('<select>');
$.each(options.value, function (idx, values) {
stringBuilder.push('<option id="' + values.OptionvalueID + '">' + values.OptionValue + '</option>');
});
stringBuilder.push('</select>');
$("#productdetails").append(stringBuilder.join(''));
}
});
Upvotes: 1
Views: 583
Reputation: 6520
From what you've stated I'm guessing that you've got a model with a dropdown already created using Html.DropDownListFor for the element productdetails and that you want to populate it from the an ajax call.
So you want to make a jQuery ajax call like this
$.ajax({
url: "/SomeController/SomeDetails",
type: "GET",
success: function (data) {
$("#productdetails option").remove();
$.each(data, function (key, value) {
$('#productdetails')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
}
});
If you don't want to remove the old values of the select, then just remove the line $("#productdetails option").remove();
Also note that my controller method returns a JSON Object of key value pairs for the option elements.
Upvotes: 1