データベース データで満たされた動的なドロップダウン選択メニューを作成するには、あなたの助けが必要です。
だから私が必要なのは:
ボタン
ボタンを押すたびに、データベース データで満たされたドロップダウン メニューが作成されます。
この例は非常に似ていることがわかりましたが、データベース データをテキスト ボックスまたはドロップダウン メニューに渡す方法がわかりません。
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;
}