Add to select box from JSON data

[armon]

Hello everyone,
I'm using jQuery Editable Select for HTML support, I have 2 select boxes. In the first one i have (Types) and in the second one (SubTypes) it means that for every (Types) we have different (SubTypes). for the first select box i don't have any problem, but for the second select box i receive ajax in format JSON but i don't know how i can integrate it in my second Editable Select box.

this is my code ...

Code: Select all

<script>

        window.onload = function () {

            myselect = $('#datatype').editableSelect({filter: false});

            $('#subdatatype').editableSelect({filter: false});

            $('#datatype1').qtip({// Grab some elements to apply the tooltip to
                content: {
                    text: 'My common piece of text here'
                }
            });
            $('#datatype2').qtip({// Grab some elements to apply the tooltip to
                content: {
                    text: 'My common piece of text here'
                }
            });
            $('#datatype3').qtip({// Grab some elements to apply the tooltip to
                content: {
                    text: 'My common piece of text here'
                }
            });
            $('#datatype4').qtip({// Grab some elements to apply the tooltip to
                content: {
                    text: 'My common piece of text here'
                }
            });
            $('#datatype5').qtip({// Grab some elements to apply the tooltip to
                content: {
                    text: 'My common piece of text here'
                }
            });


            $('li').click(function () {
                datatypeid = $(this).attr('value');
                $.ajax({
                    type: 'get',
                    url: 'http://localhost:.../getsubdatatype/' + datatypeid,
                    beforeSend: function ()
                    {
                        $("#subdatatype option").remove();
                    },
                    success: function (data)
                    {
                        $.each(data, function (key, value)
                        {

                            $('#subdatatype').append('<option value=' + key + '>' + value + '</option>');
                        });
                    }
                });     
            });
        }



            s_Datatype = $('#datatype option')
            n = s_Datatype.length;

            K_subdatatype = $('#subdatatype')
            m = K_subdatatype.length;
            //alert(m);

            for (i = 1; i < n + 1; i++) {
                InfoDatatype = '<small><a href="" target="_blank" id="datatype' + i + '" style="float:right" rel="nofollow">?</a></small>';
                $(s_Datatype[i]).text($(s_Datatype[i]).text() + InfoDatatype);

            }
            for (i = 1; i < m + 1; i++) {
                InfoSubDatatype = '<small><a href="" target="_blank" id="subdatatype' + i + '" style="float:right" rel="nofollow">?</a></small>';
                $(K_subdatatype[i]).text($(K_subdatatype[i]).text() + InfoSubDatatype);
            }

[johnmacd]

Hi,

Use this:
$.getJSON("your://site.com", function(json){
$('#select').empty();
$('#select').append($('<option>').text("Select"));
$.each(json, function(i, obj){
$('#select').append($('<option>').text(obj.text).attr('value', obj.val));
});
});

Thanks