2017-07-10 46 views
0

我有跟隨一個網站做一個動態依賴選擇使用SQL JQuery Ajax與PHP,它的工作!,但我想從第二和第三選擇框一旦我選擇,並自動填寫到其他輸入框。有可能做到這一點嗎?如何從SQL動態依賴選擇

look like this

如果我選擇了所有3選擇框和數據已經顯示(取出從SQL) 可以我複製那些2值到其他輸入框,並自動填充到盒???

由於大部分

代碼如下

的index.php

<?php 
$connect = mysqli_connect("localhost", "root", "", "testing"); 
$country = ''; 
$query = "SELECT country FROM country_state_city GROUP BY country ORDER BY country ASC"; 
$result = mysqli_query($connect, $query); 
while($row = mysqli_fetch_array($result)) 
{ 
$country .= '<option value="'.$row["country"].'">'.$row["country"].'</option>'; 
} 
?> 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <br /><br /> 
    <div class="container" style="width:600px;"> 
    <h2 align="center">Dynamic Dependent Select Box using JQuery Ajax with PHP</h2><br /><br /> 
    <select name="country" id="country" class="form-control action"> 
    <option value="">Select Country</option> 
    <?php echo $country; ?> 
    </select> 
    <br /> 
    <select name="state" id="state" class="form-control action"> 
    <option value="">Select State</option> 
    </select> 
    <br /> 
    <select name="city" id="city" class="form-control"> 
    <option value="">Select City</option> 
    </select> 
    </div> 
</body> 
</html> 

<script> 
$(document).ready(function(){ 
$('.action').change(function(){ 
    if($(this).val() != '') 
    { 
    var action = $(this).attr("id"); 
    var query = $(this).val(); 
    var result = ''; 
    if(action == "country") 
    { 
    result = 'state'; 
    } 
    else 
    { 
    result = 'city'; 
    } 
    $.ajax({ 
    url:"fetch.php", 
    method:"POST", 
    data:{action:action, query:query}, 
    success:function(data){ 
    $('#'+result).html(data); 
    } 
    }) 
    } 
}); 
}); 
</script> 

fatch.php

<?php 
if(isset($_POST["action"])) 
{ 
$connect = mysqli_connect("localhost", "root", "", "testing"); 
$output = ''; 
if($_POST["action"] == "country") 
{ 
    $query = "SELECT state FROM country_state_city WHERE country = '".$_POST["query"]."' GROUP BY state"; 
    $result = mysqli_query($connect, $query); 
    $output .= '<option value="">Select State</option>'; 
    while($row = mysqli_fetch_array($result)) 
    { 
    $output .= '<option value="'.$row["state"].'">'.$row["state"].'</option>'; 
    } 
} 
if($_POST["action"] == "state") 
{ 
    $query = "SELECT city FROM country_state_city WHERE state = '".$_POST["query"]."'"; 
    $result = mysqli_query($connect, $query); 
    $output .= '<option value="">Select City</option>'; 
    while($row = mysqli_fetch_array($result)) 
    { 
    $output .= '<option value="'.$row["city"].'">'.$row["city"].'</option>'; 
    } 
} 
echo $output; 
} 
?> 

回答

0

創建兩個輸入框,然後使用jQuery來填充這些上的變化兩個像這樣的選擇框。

<div> 
    <input id="forState" /> 
    <input id="forCity" />  
</div> 

SCRIPT:

 $('#state').change(function(){    
      console.log($("#state option:selected").val()); 
      $('#forState').val($("#state option:selected").val()); 
     }); 

     $('#city').change(function(){    
      console.log($("#city option:selected").val()); 
      $('#forCity').val($("#city option:selected").val()); 
     }); 
+0

這就是偉大的,非常感謝 – NDSAC