在javascript中嵌入php下拉框

时间:2013-11-28 11:10:55

标签: javascript php

我想嵌入一个从db查询填充的下拉列表:

<?php

mysql_connect('localhost', 'blahh', 'password');
mysql_select_db('reporting');

$sql = "SELECT DISTINCT ProductNumber, Description FROM Stock WHERE ProductGroup ='800'";
$result = mysql_query($sql);

echo "<select name='PRODS' multiple>";
while ($row = mysql_fetch_array($result)) {
    echo "<option value='" . $row['Description'] . "'>" . $row['Description'] . "</option>";
}
echo "</select>";

?>

在按下按钮时创建多行的javascript。

    <html>
<head>
<title>Add Items To Repair</title>
<script language='javascript'>
row_no=0;
function addRow(tbl,row){
row_no++;
if (row_no<=20){
if (row_no>=10){
var textbox  = row_no+'.)<input type='text' size = '2'  maxlength= '2' name= quantity[]>';}
if (row_no<10){
var textbox  = row_no+'.  )<input type='text' size = '2'  maxlength= '2' name= quantity[]>';}
var textbox2 = '<input type='text' size = '100' maxlength= '100' name= desc[]>';
var textbox4 = '<input type='text' size = '20' maxlength= '20' name= issue[]>';
var tbl = document.getElementById(tbl);
var rowIndex = document.getElementById(row).value;
var newRow = tbl.insertRow(row_no);
var newCell = newRow.insertCell(0);
newCell.innerHTML = textbox;
var newCell = newRow.insertCell(1);
newCell.innerHTML = textbox2;
var newCell = newRow.insertCell(2);
newCell.innerHTML = textbox3;
var newCell = newRow.insertCell(3);
newCell.innerHTML = textbox4;

}
if (row_no>12){
alert ('Too Many Items. Limit of 12.'); 
}
}


</script>

我基本上想要将下拉框添加到创建的javascript中。 我在javascript上非常基础。

1 个答案:

答案 0 :(得分:0)

我建议您使用jQuery的clone方法,而不是使用上面的方法。

Ex:将所有表单元素放在容器中:

<div id="container1">
    <input type='text' size = '2'  maxlength= '2' name= quantity[]>
    <input type='text' size = '100' maxlength= '100' name= desc[]>
    <input type='text' size = '100' maxlength= '100' name= issue[]>
    <select name=selectbox[]>
        <option>You can loop here from your DB call</option>
    </select>
</div>
<div id="container2">
</div>

使用后

$( ".container1" ).clone().appendTo( ".container2" );

更多参考资料:

http://api.jquery.com/clone/

使用此onclick,如下所示:

$(document).ready(function() {
    $( ".clicktoappend" ).click(function() {
        $( ".container1" ).clone().appendTo( ".container2" );
    });
});

PS:未经测试,但这应该有效

以上是一个示例,尚未测试,请检查这是否有帮助。