javascript - 如何使用 jQuery 和 Ajax 拆分来自选择元素的数据
问题描述
我的问题是拆分数据时。我所做的是创建了 3 个<select>
元素。我管理并成功获取数据并尝试拆分它。第一个选择元素是选择一个人,单击它时,它将在第二个元素中显示另一个数据,然后在选择时,结果会将其对应的数据附加到第三个选择元素。问题我无法将它分开,当我尝试拆分时它不起作用。
这是图片
被包围的意味着它们是我的 ajax 中的分隔选项,它的变量名是'<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>'
,我的目标是将它附加到我的第三个选择元素。然后未圈出的那些意味着它应该留在标记为部门的选择中。
第二张图片是我希望有人可以帮助我如何拆分然后附加第一张图片中的环绕数据并放入我的第三个选择元素中。
这是我的代码
function ToolsChange(element) {
let tools_controller = $(element).val();
if (tools_controller) {
$.ajax({
type: "post",
url: "form_ajax_for_request.php",
data: {
"tools_cont": tools_controller
},
success: function(response) {
// alert(response);
var dataSplit = response;
var shouldSplit = dataSplit.split("@");
// alert(shouldSplit[1]);
$('#sel_requested_dept').html('');
$('#sel_requested_dept').append(response);
$('#sel_requested_dept').selectpicker('refresh');
$('#sel_requested_section').html('');
$('#sel_requested_section').append(shouldSplit[2]);
$('#sel_requested_section').selectpicker('refresh');
}
});
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label> Tools Controller: </label>
<select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
<option value="" selected disabled> Select Tools Controller </option>
<?php
$query = "SELECT * FROM tools_dept_registration";
$con->next_result();
$result=mysqli_query($con,$query);
if(mysqli_num_rows($result)>0)
{
while($row=mysqli_fetch_assoc($result))
{
echo '<option value="'.$row['name_of_controller'].'">'. $row['name_of_controller']
.'</option>';
}
}
?>
</select>
</div>
<div class="form-group">
<label> Department </label>
<select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live-
search="true" required>
<option value="" selected disabled> Select Department </option>
</select>
</div>
<div class="form-group">
<label> Section/Model </label>
<select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
<option value="" selected disabled> Select Section/Model </option>
</select>
</div>
我的 ajax/php 中的整个代码
<?php
include("../include/connect.php");
if(isset($_POST['tools_cont'])){
$ID = $_POST['tools_cont'];
$query = "SELECT * FROM tools_dept_registration
RIGHT JOIN tools_section_model_reg ON tools_section_model_reg.dept_id = tools_dept_registration.ID
WHERE name_of_controller = '$ID'";
$con->next_result();
$result=mysqli_query($con, $query);
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_assoc($result))
{
echo "@" . '<option value="'.$row['dept_name'].'">'. $row['dept_name'] . " - " . $row['ass_leader'] . '</option>'
. "@" .'<option value="'.$row['section_model'].'">'. $row['section_model'] .'</option>';
}
}
}
?>
解决方案
您可以使用for-loop
迭代拆分值并检查 的值i
是否取决于此将您的选项添加到所需的选择框。
演示代码:
function ToolsChange(element) {
let tools_controller = $(element).val();
if (tools_controller) {
/*$.ajax({
//your other,,code..
success: function(response) {*/
//suppose reponse look like this
var response = '@<option value=C>C - D</option>@<option value=S>Sm</option>@<option value=D>D - E</option>@<option value=S1>Sm1</option>@<option value=M>D - M</option>@<option value=S2>Sm2</option>'
var dataSplit = response;
$('#sel_requested_dept').html('');
$('#sel_requested_section').html('');
var shouldSplit = dataSplit.split("@");
for (var i = 0; i < shouldSplit.length; i++) {
//check if at even position
if (i % 2 == 0) {
$('#sel_requested_section').append(shouldSplit[i]);
} else {
$('#sel_requested_dept').append(shouldSplit[i]);
}
}
$('#sel_requested_dept').selectpicker('refresh');
$('#sel_requested_section').selectpicker('refresh');
/*}
});*/
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" 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.3/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.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.3/js/bootstrap-select.js"></script>
<div class="form-group">
<label> Tools Controller: </label>
<select class="form-control selectpicker" name="tools_controller" data-live-search="true" onchange="ToolsChange(this)" required>
<option value="" selected disabled> Select Tools Controller </option>
<option value="A"> A </option>
<option value="B"> B </option>
</select>
</div>
<div class="form-group">
<label> Department </label>
<select name="request_dept" id="sel_requested_dept" class="form-control selectpicker" data-live- search="true" required>
<option value="" selected disabled> Select Department </option>
</select>
</div>
<div class="form-group">
<label> Section/Model </label>
<select name="request_section_model" id="sel_requested_section" class="form-control selectpicker" data-live-search="true" required>
<option value="" selected disabled> Select Section/Model </option>
</select>
</div>
推荐阅读
- kubernetes - Operator-SDK 错误,“CRD 存在于包中,但未在 CSV 中定义”
- asp.net - 每个控制器在 ASP.NET Swagger 端点中都有一个单独的 swagger.json
- json - 使用 jq 进行转换时如何引用“子文档”
- node.js - 使用云功能将视频从 Firebase 存储上传到 youtube
- wsdl - 从 spyne wsdl 输入和输出中删除外标签
- ruby-on-rails - 使用刺激反射创建一个赞按钮
- arduino - 我想要 arduino 输出声音自定义
- python-3.x - 使用python格式化excel并在excel中写入
- google-colaboratory - 如何在 Colab 上升级到 python 3.8?
- javascript - 有没有更好的方法来使用 jquery 来完成这个?