mvc JQuery JSON.parse() 填充下拉列表

Question

我想填充从 JSON.parse() 返回的 Javascript 对象的下拉列表。尝试过但没有成功。请帮忙

<script type="text/javascript" charset="utf-8">
<br />
    //This is returned from Model. All I want to put that in dropdown.<br />
    //var cat = JSON.parse('[{"Selected":false,"Text":"Blue","Value":"1"},{"Selected":false,"Text":"Red","Value":"2"},{"Selected":false,"Text":"Grey","Value":"3"},{"Selected":false,"Text":"Black","Value":"4"},{"Selected":false,"Text":"Green","Value":"5"},{"Selected":false,"Text":"Olive","Value":"6"},{"Selected":false,"Text":"Orange","Value":"7"},{"Selected":false,"Text":"Pink","Value":"8"},{"Selected":false,"Text":"Violet","Value":"9"},{"Selected":false,"Text":"Yellow","Value":"10"}]');

<br /><br />
    var cat = JSON.parse('<%= Html.ToJson(Model.Colors) %>');
<br />
</script>

Answer 1

您可以使用以下代码来完成此操作，

HTML 是，

<input type="button" id="btnclick" value="add" />

<select id="drpTemp">
</select>

JQuery 代码是，

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $("#btnclick").click(function () {            
            //This is returned from Model. All I want to put that in dropdown.<br />
            var cat = JSON.parse('[{"Selected":false,"Text":"Blue","Value":"1"},{"Selected":false,"Text":"Red","Value":"2"},{"Selected":false,"Text":"Grey","Value":"3"},{"Selected":false,"Text":"Black","Value":"4"},{"Selected":false,"Text":"Green","Value":"5"},{"Selected":false,"Text":"Olive","Value":"6"},{"Selected":false,"Text":"Orange","Value":"7"},{"Selected":false,"Text":"Pink","Value":"8"},{"Selected":true,"Text":"Violet","Value":"9"},{"Selected":false,"Text":"Yellow","Value":"10"}]');            
            var items = cat;
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var optionhtml = '<option value="' + item.Value + '>' + item.Text + '</option>';
                $("#drpTemp").append(optionhtml);
            }
        });
    });
</script>

它将在单击按钮时填充下拉列表。