0

データベース データで満たされた動的なドロップダウン選択メニューを作成するには、あなたの助けが必要です。

だから私が必要なのは:

  • ボタン

  • ボタンを押すたびに、データベース データで満たされたドロップダウン メニューが作成されます。

この例は非常に似ていることがわかりましたが、データベース データをテキスト ボックスまたはドロップダウン メニューに渡す方法がわかりません。

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;
}

プレビュー

4

0 に答える 0