我在数据库中有一个类似的表
id | service | rate | unit |
1 wifi 1,000 Mbps
2 fiber optic 1,500 Km
我还有一个类似下面的表格
<form>
<select class="form-control" id="service">
<option></option>
<option value='1'>Wifi</option>
<option value='2'>Fiber Optic</option>
</select>
<table>
<tbody>
<tr class="main">
<td></td>
<td>
<input type="text" name="service" class="form-control" placeholder="service">
</td>
<td>
<input type="text" name="rate" class="form-control" placeholder="Rate / Price">
</td>
<td>
<input type="text" name="unit" class="form-control" placeholder="Mbps/Km">
</td>
</tr>
</tbody>
</table>
</form>
我想根据select option的值自动将value添加到表中。
你知道如何添加或显示它吗？
谢谢
使用一些基本的PHP来模拟数据库查找和一些普通的javascript，通常会做这样的事情。向PHP脚本发送Ajax请求，PHP脚本根据请求中发送的值/id在数据库中进行查找。让PHP脚本发送一个包含正确数据的响应，然后使用ajax回调来填充表单字段。
<?php
/* To emulate a database lookup */
$dbtable=array(
1 => (object)array('service' => 'wifi', 'rate' => 1000, 'unit' => 'mbps'),
2 => (object)array('service' => 'fibre optic', 'rate' => 1500 , 'unit' => 'km')
);
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['id'] ) ){
ob_clean();
$obj=array_key_exists( $_POST['id'], $dbtable ) ? $dbtable[ $_POST['id'] ] : false;
header('Content-Type: application/json');
exit( $obj ? json_encode( $obj ) : $obj );
}
?>
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Set Form field values based upon selected option</title>
<script>
const ajax=function(url,params,callback){
let xhr=new XMLHttpRequest();
xhr.onload=function(){
if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
};
xhr.open( 'POST', url, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( params );
};
document.addEventListener('DOMContentLoaded',()=>{
document.querySelector('select[id="service"]').addEventListener('change',function(e){
ajax( location.href, 'id='+this.value, function(r){
if( !r ){
alert( 'Bad foo!' );
return;
}
let json=JSON.parse( r );
Object.keys( json ).map( k=>{
let field=document.querySelector('input[name="'+k+'"]');
if( field )field.value=json[k]
})
});
});
});
</script>
</head>
<body>
<select class='form-control' id='service'>
<option selected disabled hidden>Please select service
<option value=1>Wifi
<option value=2>Fibre Optic
</select>
<table>
<tr class='main'>
<td></td>
<td>
<input type='text' name='service' class='form-control' placeholder='service' />
</td>
<td>
<input type='text' name='rate' class='form-control' placeholder='Rate / Price' />
</td>
<td>
<input type='text' name='unit' class='form-control' placeholder='Mbps/Km' />
</td>
</tr>
</table>
</body>
</html>
如果表中只包含这两个值，那么您可以获取所选选项的值，并根据该值获取结果。指定要选择的名称--
<select class="form-control" id="service" name="service">
<option></option>
<option value='1'>Wifi</option>
<option value='2'>Fiber Optic</option>
在php文件中--
$selectedOption = $_REQUEST['service']; //this will store the value of option
$con=mysqli_connect("server","username","password","db_name");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM table_name where id = $selectedOption");
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td><input value='" . $row['service'] . "'></td>";
echo "<td><input value='" . $row['rate'] . "'></td>";
echo "<td><input value='" . $row['unit'] . "'</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
如果您的表是动态的，请尝试选择选项的文本<option value="wifi">wifi</option>
我建议您使用Jquery。这样您就可以向控制器触发ajax请求。在您的控制器中，您可以选择选项，并从带有模型的数据库表中获取数据。然后将数据从控制器返回到ajax请求，并使用重新填充html表单。下面是一个例子。从html页面触发对控制器的ajax请求。
$( document ).ready(function() {
$('#service').change(function(){
var selectedValue = $(this).val();
$.ajax({
method: "POST",
url: "url-to-controller",
dataType:"json",
data: { 'service': selectedValue },
success:function(data){
//get json data and populate html form
}
})
});
});
在您的控制器中获取json数据，对其进行解码。然后从DB中获取模型。然后作为json数据返回。
$service = $_POST['service'];
$service_info = array();
if(!empty($service)){
//get data from model
$service_info = $data_from_model;
}
header('Content-Type: application/json');//set header
if(!empty($service_info)){
echo json_encode(array('result'=>1,'service_name' =>
$service_info['name'],'rate'=>$service_info['rates'],
'units'=>$service_info['units']));
}else{
echo json_encode(array('result'=>0));
}