javascript - 使用javascript的动态下拉按钮

Question

如何使用 java 脚本创建一个动态下拉框，并在其中填充列表？这是我的小提琴，请帮忙！

按钮

$(document).ready(function(){
$("#b_id").click(function(){
    $("#div_id").append($('<select/>'));

})

});

http://jsfiddle.net/L4reds/wmqcd/

Answer 1

您可以像这样在添加内部 html 时添加更多代码，它会起作用

$("#div_id").append($('<select><option value="1">one</option></select>'))

Answer 2

只需将此脚本添加到您的代码中，我希望这对您有效：

参考这个小提琴：JsFiddle

$(document).ready(function(){
    $("#b_id").click(function(){
        var drop_list = '<select>';
        drop_list += '<option value="Asia">Asia</option>';
        drop_list += '<option value="UK">UK</option>';
        drop_list += '<option value="USA">USA</option>';        
        drop_list += '</select>';    
        $("#div_id").append(drop_list);    
    })    
});

Answer 3

只需在附加 select 后添加选项：

$("#b_id").click(function(){
    $("#div_id").append($('<select/>'));
    $("#div_id select").append($('<option value="1">one</option>'));
    $("#div_id select").append($('<option value="2">two</option>'));
});

Answer 4

您可以添加类似于select使用 jQuery 的选项。

.val() - 设置/获取元素的值
.text() - 设置元素的innerHTML

$('<option>').val('1').text('option1').appendTo($('select'));

你的代码：

$(document).ready(function(){
    $("#b_id").click(function(){
        $("#div_id").append($('<select/>'));
       $('<option>').val('1').text('option1').appendTo($('select'));       
    })

});

检查这个小提琴

Answer 5

尝试这个。

$(document).ready(function(){ $("#b_id").click(function(){

var cmbType = $("<select></select>").attr("id",'cmbType').attr("name", 'cmbType').attr("class", "rtctrl");
var Types = {
    0: '--Select--',
    1: 'DEED',
    2: 'FORECLOSURE',
    3: 'TAX SALE',
    4: 'ASSESSOR',
    5: 'RENTAL'
};
$.each(Types, function (val, text) {
    cmbType.append(
    $('<option></option>').val(val).html(text)
);
});

 $("#div_id").append(cmbType);
});

});

检查：http: //jsfiddle.net/wmqcd/10/