Question

我想根据选择框更改值生成动态表单。

假设我有一个父选择框：

<select name="select1" id="select1">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Bird</option>
  <option value="4">Car</option>
</select>

选择框下面的

取决于第一个

<select name="select2" id="select2">
  <option value="banana">Banana</option>
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
</select>

这是我的2个选择框，我想要2个东西

1）创建2这个选择框的依赖

2）我想根据更改第二个选择框值生成动态表单。

例如，如果我选择苹果然后打开一个带有相关苹果值的表格。

我是jquery的新手，我对此一无所知（如果有人知道，请与我分享代码脚本）

Answer 1

您可以按照这种方式制作动态下拉列表。

以下HTML代码包含国家/地区的相关下拉列表。从数据库中读取国家/地区选项，并显示在页面加载的下拉列表中。最初，州下拉列表没有选项。在更改国家/地区下拉值时，将调用jQuery函数以获取相关状态选项并动态加载。

<div class="frmDronpDown">
  <div class="row">
    <label>Country:</label><br/>
    <select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
    <option value="">Select Country</option>
    <?php
    foreach($results as $country) {
    ?>
    <option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
    <?php
    }
    ?>
    </select>
  </div>
  <div class="row">
    <label>State:</label><br/>
    <select name="state" id="state-list" class="demoInputBox">
    <option value="">Select State</option>
    </select>
  </div>
</div>

以下jQuery脚本显示了向PHP发送AJAX请求以读取状态列表的函数取决于所选国家/地区。此AJAX调用使用所选的国家/地区ID进行设置。

<script>
function getState(val) {
  $.ajax({
  type: "POST",
  url: "get_state.php",
  data:'country_id='+val,
  success: function(data){
    $("#state-list").html(data);
  }
  });
}
</script>

在PHP中，它连接数据库以根据jQuery AJAX调用传递的国家/地区ID检索“状态”表值。它形成状态下拉选项并作为AJAX响应返回。此响应将插入到状态下拉列表中。

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["country_id"])) {
  $query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
  $results = $db_handle->runQuery($query);
?>
  <option value="">Select State</option>
<?php
  foreach($results as $state) {
?>
  <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option>
<?php
  }
}
?>

动态生成基于选择框更改值的表单

1 个答案: