Question

我需要你的帮助来创建一个充满数据库数据的动态下拉选择菜单。

所以我需要的是：

按钮
每次按下按钮，都会创建一个填充数据库数据的下拉菜单。

我发现这个例子非常相似，但我不知道如何将数据库数据传递到文本框或下拉菜单。

HTML：

<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input type='text' id='textbox1' name='textbox1'/>
    </div>
</div>
<input type='button' value='Add Button' id='addButton'/>
<input type='button' value='Remove Button' id='removeButton'/>
<input type='button' value='Get TextBox Value' id='getButtonValue'/>
</body>
</html>

的JavaScript

$(document).ready(function () {
    var counter = 2;
    $("#addButton").click(function () {
        if (counter > 10) {
            alert("Only 10 textboxes allowed");
            return false;
        }
        $('<div/>', {
            'id': 'TextBoxDiv' + counter
        }).html(
            $('<label/>').html('Textbox #' + counter + ' : ')
        )
            .append($('<input type="text">').attr({
                'id': 'textbox' + counter,
                'name': 'textbox' + counter
            }))
            .appendTo('#TextBoxesGroup')
        counter++;
    });

    $("#removeButton").click(function () {
        if (counter == 1) {
            alert("No more textbox to remove");
            return false;
        }
        counter--;
        $("#TextBoxDiv" + counter).remove();
    });
    $("#getButtonValue").click(function () {
        var msg = '';
        for (i = 1; i < counter; i++) {
            msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
        }
        alert(msg);
    });
});

CSS

div{
    padding:8px;
}

Preview

创建充满数据库数据的动态下拉列表选择菜单

0 个答案: