2016-11-18 29 views
-2

我有一个动态表,当最终用户按下按钮时会生成行。我在输入框中使用它没有问题。现在即时尝试将一个输入更改为从我的数据库查询数据的组合框。我所知道的问题是如何动态添加组合框以及它的php代码。我如何将我的php代码与我的js代码混合

$(document).ready(function(){ 
 
    var counter = 2; 
 
    $('.add-row').click(function() { 
 
     $(".item_form").append(
 
      '<tr><td><input type="text" name="serialnoa[]" placeholder="serial no.' + 
 
      counter + '"/></td></tr>' 
 
     ); 
 
     counter++; 
 
    }); 
 
    $('.del-row').click(function() { 
 
     if($(".item_form tr").length != 2) 
 
     { 
 
      $(".item_form tr:last-child").remove(); 
 
      counter--; 
 
     } 
 
     else 
 
     { 
 
      alert("You cannot delete first row"); 
 
     } 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html class="no-js" lang="en" dir="ltr"> 
 
    
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    
 
<table class="item_form"> 
 
<tr> 
 
    <th>serial no.</th> 
 
    <th>brand<th> 
 
</tr> 
 

 
<tr> 
 
    <td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td> 
 
    <td> 
 
\t <select name="show_brands[]"> 
 
\t <?php 
 
\t mysql_connect('localhost', 'root', 'adminpass'); 
 
\t mysql_select_db('my_db'); 
 
\t $sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand"; 
 
\t $result = mysql_query($sql); 
 

 
\t while ($brand=mysql_fetch_assoc($result)) { 
 
\t \t echo "<option value='".$brand['brand']."'>".$brand['brand']."</option>"; 
 
\t } 
 
\t ?> 
 
\t </select> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<table> 
 
<tr> 
 
\t <td><a href="#" class="add-row"><div>+ Row</div></td> 
 
\t <td><a href="#" class="del-row"><div>- Row</div></td> 
 
\t \t \t \t \t \t \t \t \t 
 
</tr> 
 
</table> 
 
    
 
</body> 
 
</html>

+1

您可以用'回声“”;'使用PHP –

+0

要么加载它在默认情况下处于隐藏状态,并揭示它按一下按钮,或者使用AJAX来获取数据库信息。 –

+0

@JyothiBabuAraja我不知道你想表达什么。我能够复制/追加组合框。但需要传递的查询来填充选项,并重视那是我面临的问题。最好的方法是什么? – bongoloids

回答

0

我只是用一个模拟来填充动态select盒。 您需要删除server环境中的模拟。 如果您的数据库提供了正确的数据,则将该数据填充到JavaScript数组中。然后,您可以使用该阵列填充动态select框。

function populateSelect(element){ 
 
    brands.forEach(function(brand){ 
 
    $('<option />', { 
 
     value: brand, 
 
     text: brand 
 
    }).appendTo($(element)); 
 
    }) 
 
} 
 
$(document).ready(function(){ 
 
    populateSelect('select'); //populating first select 
 
\t var counter = 2; 
 
    $('.add-row').click(function() { 
 
      $(".item_form").append('<tr><td><input type="text" name="serialnoa[]" id="serialno' + counter + '" placeholder="serial no.' + 
 
     \t counter + '"/></td><td><select id="select-serialno' + counter + '"></select></td></tr>'); 
 
     populateSelect("#select-serialno" + counter); //populating new select created 
 
\t \t \t counter++; 
 
    }); 
 
    $('.del-row').click(function() { 
 
     if($(".item_form tr").length != 2) 
 
     { 
 
      $(".item_form tr:last-child").remove(); 
 
      counter--; 
 
     } 
 
     else 
 
     { 
 
      alert("You cannot delete first row"); 
 
     } 
 
      \t }); 
 
}); 
 
</script>
<!DOCTYPE html> 
 
<html class="no-js" lang="en" dir="ltr"> 
 
    
 
<head> 
 
<meta charset="utf-8"> 
 
<meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 

 
<link rel="stylesheet" type="text/css" href="_css/inventory.css?v=<?=time();?>"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <!--Uncomment below php code in your PHP environment --> 
 
    <!--<?php 
 
\t mysql_connect('localhost', 'root', 'adminpass'); 
 
\t mysql_select_db('my_db'); 
 
\t $sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand"; 
 
\t $result = mysql_query($sql); 
 
    echo '<script>'; //here starts creating new array of brands 
 
    echo 'var brands = []'; 
 
\t while ($brand=mysql_fetch_assoc($result)) { 
 
\t \t echo 'brands.push("'. $brand['brand'] .'")'; //adding new brand to brand array 
 
\t } 
 
    echo '</script>' 
 
\t ?> --> 
 
    <script> 
 
    //NOTE: a mock for your DB 
 
    var brands = ["brand1", "brand2"]; //removes this if your php codes works 
 
    </script> 
 
<table class="item_form"> 
 
<tr> 
 
    <th>serial no.</th> 
 
    <th>brand<th> 
 
</tr> 
 

 
<tr> 
 
    <td><input type="text" placeholder="serial no.1" name="serialnoa[]"></td> 
 
    <td> 
 
\t <select name="show_brands[]"> 
 
\t </select> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
<table> 
 
<tr> 
 
\t <td><a href="#" class="add-row"><div>+ Row</div></td> 
 
\t <td><a href="#" class="del-row"><div>- Row</div></td> 
 
\t \t \t \t \t \t \t \t \t 
 
</tr> 
 
</table> 
 
    
 
</body> 
 
</html>

+0

在过去的一小时里一直在摆弄这件事。不幸的是我无法使它工作。无论如何,谢谢,可能会寻找工作。 – bongoloids

+0

数据来自数据库吗? –

0

想看看它以不同的方式。只是添加了一个函数,用php查询镜像第一个填充的组合框。

var counter = 2; 
$('.add-row2').click(function() { 
$(".release_form").append('<tr><td><select name="show_brands[]" id="unique'+counter+'"></select></td><td><input type="text" name="serialnob[]" placeholder="serial no.' + 

    counter + '"/></td></tr>'); 
    $('#unique'+counter).append($('#unique').html()); 
    counter++; 
});