views:

46

answers:

1

Where you can pick an item from a <select> menu and then it populates a second <select> menu.

It goes by too many names and they're are too many implementations. I'm looking for an up-to-date one (works well with the latest version of jQuery) that can pull the data using Ajax.

Can anyone recommend a good plugin?

+1  A: 

// simple code but can be improved for need

  function getListBoxValue(obj) {
        obj = $.extend({
            url: "",
            bindObj: null,
            emptyText: "exception",
            postvalues : {},
            onComplete: function () { return true; },
            onError: function () { return false }
        }, obj);

        $.ajax({
            url: obj.url,
            data: obj.postvalues,
            type: "POST",
            dataType: "JSON",
            success: function (Json) {
                var options;
                $.each(Json, function (i, e) {
                    options += "<option value='" + e.Value + "'>" + e.Text + "</option>";
                });
                $(obj.bindObj).html(options);
                obj.onComplete(obj);
            },
            error: function (e, xhr) {
                $(obj.bindObj).html("<option value='-1'>" + obj.emptyText + "</option>");
                obj.onError(obj)
            }
        });
    }


// server response data Json 
[{ "Value": 1, "Text": "text 1 " },{ "Value": 2, "Text": "text 2"}]


getListBoxValue({
   {url:resposneJsondatURL, // example
    bindObj:$("select#YourID"), // example
    emptyText :"exception text", // example
    postvalues : {"id":45}, // example
    onComplete : _onCompleteFunction, // optional
    onError : _onErrorFunction // optional
   }
})
volkan er