时间戳

首页 > 解决方案 > 如何根据从上一个 [above] 下拉列表中选择的值填充 select2 下拉列表中的选项？

javascript - 如何根据从上一个 [above] 下拉列表中选择的值填充 select2 下拉列表中的选项？

问题描述

我想使用 select2 js 为用户搜索带来一个下拉列表，其中下拉列表中的值必须根据所选公司填充，这是该下拉列表上方的下拉列表。

我将 XAMPP 版本 5 与 MYSQLI 一起使用。

<?php 

include 'db.php';

?> 
<html>
<head>
 <link href='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css' rel='stylesheet' type='text/css'>
 <script src="../assets/js/core/jquery.3.2.1.min.js"></script>
 <link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
 <script src="../assets/js/core/bootstrap.min.js"></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js'></script>

</head>
<body>
<form action="" method="POST" enctype="multipart/form-data" autocomplete="off">


<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-10">

<div class="form-group row">
<label for="sel1" class="col-sm-2 col-form-label">Company  :</label>
<div class="col-sm-10">
<select onChange="company_info();"   id="company_list"  required class="form-control select2" name="company_id"  >
<option value="">Select Company</option>
<?php 
$companyDetails=mysqli_query($con, "SELECT * FROM company  order by id desc  ");

while($company = mysqli_fetch_assoc($companyDetails))
{

echo "<option value='".$company['id']."'";

echo " >".$company['compName']."</option>";
}
?> 
</select>
</div>
</div>

<div id="companyDesc"></div>

<div class="form-group row">
<label for="pthings" class="col-sm-2 col-form-label">To dos :
</label>
<div class="col-sm-10">
<select id="selUser" style="width: 200px;">
<option value="0">- Search -</option>
</select>
</div>
</div>


<div class="form-group">

<button type="submit" name="add" class="btn btn-default greenbtn btnrightalign">Submit</button>
</div>
</div>

</form>
</body>
</html>

<script>
$(document).ready(function() {

$("#selUser").select2({
ajax: { 
url: "getData.php",
type: "post",
dataType: 'json',
delay: 250,
data: function (params) {
return {
searchTerm: params.term // search term
};
},
processResults: function (response) {
return {
results: response
};
},
cache: true
}
});
} );


function company_info()
{
var compId = $("#company_list").val(); 
if (compId="")
{ 
$.ajax({url:"getCompDetails.php",
data:{'CompId':compId},
type:'POST',
success: function(result)
{     

$("#companyDesc").html(result); 

}});
}
else
{
$("#companyDesc").html('');
}

}

</script>

获取CompDetails.php：

if(isset($_POST['CompId']))
{ 

  $sql=mysqli_query($con, "SELECT  comp_desc from company where id=".$_POST['CompId']); 
  while($run_sql  =mysqli_fetch_assoc($sql))
  {

    $compDesc=$run_sql ['comp_desc'];
  }




  $str='<div class="form-group row  ">
  <label for="sel1" class="col-sm-2 col-form-label">Company Details  :</label>
  <div class="col-sm-10">
  <textarea class="form-control" name="copm_details" rows="10" cols="20">'.$compDesc.'</textarea>
  </div> </div> 
    ';

  echo $str;
}

获取数据.php

<?php
include("db.php");

if(!isset($_POST['searchTerm'])){ 
  $fetchData = mysqli_query($con,"select * from order order by id");
}else{ 
  $search = $_POST['searchTerm'];   
  $fetchData = mysqli_query($con,"select * from order where order_no like '%".$search." %'");
} 

$data = array();
while ($row = mysqli_fetch_array($fetchData)) {    
  $data[] = array("id"=>$row['id'], "text"=>$row['order_no'].'-'.$row['sales_order_no']);
}
echo json_encode($data);

?>

预期输出：

我希望 select2 下拉列表中的选项基于从公司中选择的值。

例如：在选择公司“ABC Pvt Ltd”时，待办事项下拉列表（select2）值为“页眉、页脚、侧边栏、导航、注册、登录”。

在选择公司“RAM Pvt Ltd”时，To dos 下拉列表（select2）的值为“Registration,Login,Search,Payment,Logout”。

并且用户搜索功能应该可以正常工作。

实际输出：

从我的代码中，我可以获得一个 select2 下拉列表，其中选项中的值不是基于从公司下拉列表中选择的选项。

并且用户搜索功能无法正常工作。

标签： javascriptphpjqueryajaxjquery-select2

解决方案

您需要使用公司 ID 添加您的 select2 帖子数据：

$("#selUser").select2({
    ajax: { 
        url: "getData.php",
        type: "post",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return {
                searchTerm: params.term,
                compId: $("#company_list").val() //here your company data
            };
        },
        processResults: function (response) {
            return {
                results: response
            };
        },
        cache: true
    }
});

然后您可以获取公司 ID$_POST["compId"]并将其添加到您在 get data.php 上的查询中

推荐阅读