Question

Today I try to make a dynamic dropdownlist using jQuery. I only provide one select list on the page at started. After usser selecting a option, if the selected category has sub categories, one new select list will be added next to the original select list by jQuery.

But I don’t know how to implement my idea. How to add a select list and add options to the select list, finally add it to page using jQuery.

My codes are below:

$.getJSON(
    '/Work/Content/Categories/' + currentValue,
    '{Id:Name}',
    function (data) {
        if (data.length > 0) {
            $current.append('<select></select>');
            $selectList = $('fieldset > select:last');
            $.each(data, function (index, value) {
                var option = new Option(value.Id, value.Name);
                if ($.browser.msie)
                    $selectList.add(option);
                else
                    $selectList.add(option, null);
            });
        }
    }
);

Thanks every body.

Answer 1

First off, do you need to use Ajax to do this? Can you just load all of the selects on the page initially and only show/enable the ones that are needed appropriately? If there are TONs of selects this may not be the best option, but otherwise it is a superior solution to an Ajax one.

If you really want to use Ajax, there is no need to do this with JSON. Why not just have the page that you are getting the select data from print out an actual select box on its own and just append that to the DOM?