Question

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(''));
                }
            });

Answer 1

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.