根据下拉选择填充复选框

Question

在某种形式上，我确实有一个从数据库填充的行业列表。 我想根据所选行业填充复选框列表。

我尝试了以下内容，但无法正常工作。 你能帮忙吗 ？ 我仍在学习编码，非常感谢您的帮助。

index.php

// The dropdown is populated from DB
<select class="set_industry">
    <option value="1">Healthcare</option>
    <option value="2">Food & Beverage</option>
    <option value="3">Real Estate</option>
</select>
// Preferably the selection would produce var $ind_id
.
.
.
.
// I want the below to be executed based on the selection from above

<?php 
if(isset($_POST['id'])) {
  $ind_id = $_POST['id'];
  $x="SELECT * FROM srv_tbl WHERE ind_id=$ind_id";
  $res=query($x);

  while ($y=mysqli_fetch_array($res)) { ?>
  <div>
    <label>
      <input type="checkbox" value="<?php echo $y['srv_id'] ?>"> <?php echo $y['srv_name'] ?>
    </label>
  </div>
<?php } 
} ?>

<script>Link to js script</script>

script.js

$(".set_industry").on('change', function(){ 
    var ind_id = $(this).attr("value");
    $.post("index.php", {id: ind_id}, function());  
});

Answer 1

分离您的PHP代码。

index.php

<?php 

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

  $ind_id = $_POST['id'];
  $x="SELECT * FROM srv_tbl WHERE ind_id=$ind_id";
  $res=query($x);

  $returnString = '';   
  while ($y=mysqli_fetch_array($res)) {

     $returnString .= '<div><label><input type="checkbox" value=".$y['srv_id'].">.$y['srv_name'].</label></div>';
  }

  echo $returnString;
} ?>

将新的div添加到您的HTML页面

index.html

<select class="set_industry">
    <option value="1">Healthcare</option>
    <option value="2">Food & Beverage</option>
    <option value="3">Real Estate</option>
</select>

<div id="response"></div>

<script>Link to js script</script>

对您的script.js进行这些更改

$(".set_industry").on('change', function(){ 
    var ind_id = $(this).attr("value");
    $.post("index.php", {id: ind_id}, function(data){

       $("#response").html( data );
    });  
});