2016-11-30 20 views
0

我想在用戶點擊按鈕時添加下拉列表。此下拉列表中的數據是從MySQL數據表中提取的。每當用戶點擊按鈕時,javascript函數就會調用addfile(),它使用append函數在網頁上添加html內容。問題是,下拉列表html內容填充mysql數據庫表。有什麼方法可以事先存儲數據庫表值,然後在客戶端使用這些數據生成用戶點擊下拉列表,並用已獲取的數據填充下拉列表。如何添加下拉列表與按鈕點擊mysql表數據?

如..

<p id="file_div"> 
     <label for="skills" class="icon-pencil">Key Skills 
     </label><br/> 
     <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?> 
     <select name="ddlSkill[]"> 
           <?php 
            $conn = mysqli_connect("localhost","root","","jobportal"); 
            $sql = "SELECT * FROM skills"; 
            $stmt = $conn->query($sql); 
            while($row = $stmt->fetch_array()){ 
             echo "<option>"; 
             echo $row[1]; 
             echo "</option>"; 
            }; 
           ?> 
     </select> 
    </p> 
    <p> 
     <button type="button" onClick="add_file();" class="add_more btn btn-info"> 
     <span class="icon-plus"></span> Add More Skills 
     </button> 
    </p> 


<script> 
function add_file() 
{ 
$("#file_div").append("<p style='margin-top:10px;'> 
        <select name='ddlSkill[]'> 
         <?php 
          $conn = mysqli_connect('localhost','root','','jobportal'); 
          $sql = 'SELECT * FROM skills'; 
          $stmt = $conn->query($sql); 
          while($row = $stmt->fetch_array()){ 
           echo '<option>'; 
           echo $row[1]; 
           echo '</option>'; 
          }; 
         ?>; 
        </select> 
        <img src='images/cross.jpg' width='20px' title='Delete this Skill' class='cursor-link' onclick=remove_file(this);></p>"); 
} 

function remove_file(ele) 
{ 
$(ele).parent().remove(); 
} 
</script> 
+1

是的,你可以將它存儲到javaScript變量中,或者你可以使用JSON。 – Saedawke

+1

您應該使用去往服務器的AJax調用,並在存儲它後提取要查看的數據。然後你可以使用該數據下拉列表 –

+0

@Saedawke你可以舉一個JavaScript變量的例子 – phpNoob

回答

0

試試這個。

<p id="file_div"> 
     <label for="skills" class="icon-pencil">Key Skills 
     </label><br/> 
     <!-- <input type="text" name="txtSkill[]" placeholder="Skill" style='width:90%;' />--><?php if(isset($errorSkill)){echo $errorSkill;}?> 
     <div id="dropdown-create"> 

     </div> 
    </p> 
    <p> 
     <button type="button" onClick="add_file();" class="add_more btn btn-info"> 
     <span class="icon-plus"></span> Add More Skills 
     </button> 
    </p> 
<script> 
function add_file() 
{ 
$.ajax({ 
       type: "POST", 
       url: "index.php",/*current file name*/ 
       async:false, 
       data: {func:'dropdown'}, 
       success: function(res){ 
         list = res; 
         $("#dropdown-create").html(""); 
         $("#dropdown-create").html(list); 
        } 
       }); 
} 
if($_REQUEST['func'] == 'dropdown'){ 
    <?php 
     $conn = mysqli_connect("localhost","root","","jobportal"); 
     $sql = "SELECT * FROM skills"; 
     $stmt = $conn->query($sql); 
     echo '<select name="ddlSkill[]">'; 
     while($row = $stmt->fetch_array()){ 
      echo "<option>"; 
      echo $row[1]; 
      echo "</option>"; 
     }; 
     echo '</select>'; 
     exit(); 
} ?> 
</script> 
相關問題