Question

我有一个动态表，当最终用户按下按钮时会生成行。我在输入框上使用它没有问题。现在我试图将一个输入更改为一个组合框，用于查询来自我的数据库的数据。我所知道的问题是如何动态添加组合框及其php代码。

＆＃13;

$(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");
        }
    });
});

＆＃13;

<!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>
	<select name="show_brands[]">
	<?php
	mysql_connect('localhost', 'root', 'adminpass');
	mysql_select_db('my_db'); 
	$sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand";
	$result = mysql_query($sql);

	while ($brand=mysql_fetch_assoc($result)) {
		echo "<option value='".$brand['brand']."'>".$brand['brand']."</option>";
	}
	?>
	</select>
  </td>
</tr>
</table> 

<table>
<tr>
	<td><a href="#" class="add-row"><div>+ Row</div></td>
	<td><a href="#" class="del-row"><div>- Row</div></td>
									
</tr>
</table>
  
</body>
</html>

＆＃13;

Answer 1

我刚使用MOCK来填充动态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
	var counter = 2;
     $('.add-row').click(function() {
           $(".item_form").append('<tr><td><input type="text" name="serialnoa[]" id="serialno' + counter + '" placeholder="serial no.' +
        	counter + '"/></td><td><select id="select-serialno' + counter + '"></select></td></tr>');
       populateSelect("#select-serialno" + counter ); //populating new select created
			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");
         }
         	});
});
</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 
	mysql_connect('localhost', 'root', 'adminpass');
	mysql_select_db('my_db'); 
	$sql = "SELECT DISTINCT brand FROM warehouse ORDER BY brand";
	$result = mysql_query($sql);
    echo '<script>'; //here starts creating new array of brands
    echo 'var brands = []';
	while ($brand=mysql_fetch_assoc($result)) {
		echo 'brands.push("'. $brand['brand'] .'")'; //adding new brand to brand array
	}
    echo '</script>'
	?> -->
  <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>
	<select name="show_brands[]">
	</select>
  </td>
</tr>
</table> 

<table>
<tr>
	<td><a href="#" class="add-row"><div>+ Row</div></td>
	<td><a href="#" class="del-row"><div>- Row</div></td>
									
</tr>
</table>
  
</body>
</html>

Answer 2

试图以不同的方式看待它。刚刚添加了一个函数，用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++; 
});

我怎样才能将我的PHP代码与我的js代码混合在一起

2 个答案: