如何在AJAX方法中将数据链接到选择元素? [英] How can I link data to a select element in AJAX method?
问题描述
我有一个问题,我无法将数据放入select元素中,也无法使用ID做出附加到我的ajax内部内容的选项.我得到了数据,它显示在输入元素中,但是当我将其切换到选择元素时,它不起作用.
这是我表格的图像
JQuery/Ajax代码
函数ToolsChange(element){让tools_id = $(element).val();如果(tools_id){$ .ajax({类型:"post",网址:"form_JSON_approach.php",数据: {"tools_id":tools_id},成功:功能(响应){var dataSplit =响应;console.log(response);var shouldSplit = dataSplit.split("@");var shouldNotSplit = dataSplit.split();console.log(shouldSplit);console.log(shouldSplit [0]);console.log(shouldSplit [1]);console.log(shouldSplit [2]);$(#sel_control_num").val(shouldSplit [0]);var specs = [];对于(i = 1; i< shouldSplit.length; i + = 3){specs.push(shouldSplit [i])}$(#sel_tools_spec").val(specs.join(','));$(#sel_tools_id").val(shouldSplit [2]);}});}}
HTML代码(我必须评论select元素,因为它没有显示数据)
< div class ="form-group"><标签>工具规范:</label>< input id =" sel_tools_spec"class ="form-control"name ="tools_specification"data-live-search ="true"readonly><!-< select id =" sel_tools_spec"class ="form-control selectpicker".data-live-search ="true"</select>-></div>
PHP代码
<?phpinclude("../include/connect.php");if(isset($ _ POST ['tools_id'])){$ ID = $ _POST ['tools_id'];$ query =" SELECT tools_masterlist.control_no,tools_masterlist.tools_id,tools_masterlist.tools_name,tools_spec.model_num,tools_spec.model_num_val,tools_spec.status从tools_masterlist左加入tools_spec ON tools_masterlist.tools_id = tools_spec.tools_id左联接tools_registration ON tools_masterlist.control_no = tools_registration.reg_input状态= 1 AND tools_name ='$ ID';$ con-> next_result();//$ result = mysqli_query($ con," CALL GetAjaxForToolsRegistration('$ ID')");;$ result = mysqli_query($ con,$ query);if(mysqli_num_rows($ result)> 0){while($ row = mysqli_fetch_assoc($ result)){//echo $ row ['control_no']."@".$ row ['model_num']."@".$ row ['tools_id'].echo $ row ['control_no']."@".'< option value ='''.$ row ['tools_id'].'>'.$ row ['model_num'].'</option>'."@".$ row ['tools_id'].}}别的{}}?>
您要一次附加所有数据,而不必在for循环中直接在 selectpicker
内部附加选项并刷新.>
演示代码 :
$(#sel_tools_spec").selectpicker()//在加载时初始化ToolsChange()//仅用于演示..函数ToolsChange(element){/*让tools_id = $(element).val();如果(tools_id){$ .ajax({类型:"post",网址:"form_JSON_approach.php",数据: {"tools_id":tools_id},成功:功能(响应){*///其他代码...$(#sel_tools_spec").html('');//假设数据看起来像这样...var shouldSplit = ["1",< option> A</option>","1001","2",< option> B</option>","1001"]对于(i = 1; i< shouldSplit.length; i + = 3){//在选择框内附加选项$(#sel_tools_spec").append(shouldSplit [i]);}$(#sel_tools_spec").selectpicker('refresh');//刷新/*}}); */}
<链接rel ="stylesheet" type ="text/css" href ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">< link rel ="stylesheet" href ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">< script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>< script src ="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"</script>< script src ="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"</script>< div class ="form-group"><标签>工具规范:</label>< select id ="sel_tools_spec" class ="form-control selectpicker" data-live-search ="true"></select></div>
I have a problem wherein I cannot put the data inside select element and make an option using the ID to append on what is inside my ajax. I got the data and it is showing in an input element but when I switched it into select element it doesn't work.
Here is the image of my form
JQuery / Ajax code
function ToolsChange(element) {
let tools_id = $(element).val();
if (tools_id) {
$.ajax({
type: "post",
url: "form_JSON_approach.php",
data: {
"tools_id": tools_id
},
success: function(response) {
var dataSplit = response;
console.log(response);
var shouldSplit = dataSplit.split("@");
var shouldNotSplit = dataSplit.split();
console.log(shouldSplit);
console.log(shouldSplit[0]);
console.log(shouldSplit[1]);
console.log(shouldSplit[2]);
$("#sel_control_num").val(shouldSplit[0]);
var specs = [];
for (i = 1; i < shouldSplit.length; i += 3) {
specs.push(shouldSplit[i])
}
$("#sel_tools_spec").val(specs.join(', '));
$("#sel_tools_id").val(shouldSplit[2]);
}
});
}
}
HTML code(I had to comment select element because it is not showing the data)
<div class="form-group">
<label> Tools Specification: </label>
<input id="sel_tools_spec" class="form-control" name="tools_specification"
data-live-search="true" readonly>
<!-- <select id="sel_tools_spec" class="form-control selectpicker" data-live-search="true">
</select> -->
</div>
PHP code
<?php
include("../include/connect.php");
if(isset($_POST['tools_id'])){
$ID = $_POST['tools_id'];
$query = "SELECT tools_masterlist.control_no, tools_masterlist.tools_id,
tools_masterlist.tools_name,
tools_spec.model_num,tools_spec.model_num_val, tools_spec.status
FROM tools_masterlist LEFT JOIN tools_spec ON tools_masterlist.tools_id = tools_spec.tools_id
LEFT JOIN tools_registration ON tools_masterlist.control_no = tools_registration.reg_input
WHERE status = 1 AND tools_name = '$ID'";
$con->next_result();
// $result=mysqli_query($con, "CALL GetAjaxForToolsRegistration('$ID')");
$result=mysqli_query($con, $query);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_assoc($result))
{
// echo $row['control_no'] . "@" . $row['model_num'] . "@" . $row['tools_id'] ."@";
echo $row['control_no'] . "@" . '<option value="'.$row['tools_id'].'">'.
$row['model_num'] .'</option>' . "@" . $row['tools_id'] ."@";
}
}
else
{
}
}
?>
You are appending all datas at onces instead inside for-loop you can directly append options inside your selectpicker
and refresh it.
Demo Code :
$("#sel_tools_spec").selectpicker() //intialize on load
ToolsChange() //just for demo..
function ToolsChange(element) {
/*let tools_id = $(element).val();
if (tools_id) {
$.ajax({
type: "post",
url: "form_JSON_approach.php",
data: {
"tools_id": tools_id
},
success: function(response) {*/
//other codes....
$("#sel_tools_spec").html('');
//suppose data look like this...
var shouldSplit = ["1", "<option>A</option>", "1001", "2", "<option>B</option>", "1001"]
for (i = 1; i < shouldSplit.length; i += 3) {
//append options inside select-box
$("#sel_tools_spec").append(shouldSplit[i]);
}
$("#sel_tools_spec").selectpicker('refresh'); //refresh it
/* }
});*/
}
<link rel="stylesheet " type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="form-group">
<label> Tools Specification: </label>
<select id="sel_tools_spec" class="form-control selectpicker" data-live-search="true">
</select>
</div>
这篇关于如何在AJAX方法中将数据链接到选择元素?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!