使用javascript中的append创建动态下拉列表


Create dynamic drop down list using append in javascript

嗨,我在使用append()创建javascript下拉列表时遇到问题

$('#details_edit').append('<tr id ="123"><td>drop down here<td></tr>');

我有一个变量$remarks_option来自已经有值的控制器

问题是如何在javascript中做到这一点?请帮忙。BTW im在此使用CI

感谢

假设您的dropdownlist是一个html select对象,其中包含option对象(应该是),您可以使用以下代码:

$('#details_edit').append($("<option/>", {
    value: '<?php echo $remarks_option; ?>',
    text: '<?php echo $remarks_option; ?>'
}));

您需要:

$('#details_edit').append('<tr id ="123"><td><?php echo $remarks_option; ?><td></tr>');

我希望这能奏效:

$('#details_edit').append($("<option></option>").attr("value","key Value").text("Your Value")); 

如果您从AJAX获得响应,那么这是一种方法。假设response是成功回调中的参数。

var JSONtext = response;
var JSONobject = JSON.parse(JSONtext);
$('#details_edit').append('<tr id ="123"><td><select id="mySelect"></select><td></tr>');
$('#mySelect').append(new Option(JSONobject.name,JSONobject.value));

哦,糟糕的是,我没有看到OP的评论,他在评论中说他得到的是选择框本身,而不是一个对象。把这个答案放在这里,以防有人觉得有用!

如果您从控制器中获得类似"test"的值,则使用以下内容:

$('#details_edit').append('<tr id ="123"><td><?php print_r($remarks_optio);?><td></tr>');

如果你只得到选项值,那么就这样使用:

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};  // assume myoptions contains value returned by controller
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

希望它能回答你的问题。

javascript:的基本功能

$(document).ready(function () {
        var opt_1 = document.createElement("option");
        opt_1.setAttribute('value', "0");
        opt_1.innerHTML = "-- Select --";
        var opt_2 = document.createElement("option");
        opt_2.setAttribute('value', "2");
        opt_2.innerHTML = "Option A";
        var opt_3 = document.createElement("option");
        opt_3.setAttribute('value', "3");
        opt_3.innerHTML = "Option B";
        var ddl = document.createElement("select");
        ddl.setAttribute('id', 'selectDynamic');
        ddl.addEventListener("change", function () {
            alert(this.value);
        }, false);
        ddl.appendChild(opt_1);
        ddl.appendChild(opt_2);
        ddl.appendChild(opt_3);
        document.getElementById('details_edit').parentNode.appendChild(ddl);
    });