2016-11-18 63 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++; 
});