无法使用 PHP 和 jQuery 加载依赖于多选

Question

我尝试加载多个选定国家/地区的州列表，当我在这里尝试表单时它起作用了https://phppot.com/php/load-dependent-dropdown-on-multi-select-using-php-and-jquery/

我试图通过将<select> 替换为<input type="checkbox"> 来做一些小改动

但它不加载任何状态列表，我在控制台中收到错误

 index.php:36 Uncaught TypeError: Cannot read property 'length' of null
at getState (index.php:36)
at HTMLInputElement.onchange (index.php:64)
 getState @ index.php:36
 onchange @ index.php:64

这是我尝试过的：

<div class="row">
  <label>Country:</label><br /> 
     <?php
         foreach ($countryResult as $country) {
     ?>
          <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="country[]" id="<?php echo $country["id"]; ?>" onChange="getState();" value="<?php echo $country["id"]; ?>">
                        <label class="form-check-label" for="<?php echo $country["id"]; ?>">
                            <?php echo $country["country_name"]; ?>
                        </label>
                    </div>
                    <?php
                }
                ?>
        </div>
        <div class="row">
            <label>State:</label>
            <select name="state[]" id="state-list" class="demoInputBox" multiple size=5>
                <option value="">Select State</option>
            </select>
        </div>

脚本

function getState() {
            var str = '';
            var val = document.getElementById('country-list');
            for (i = 0; i < val.length; i++) {
                if (val[i].selected) {
                    str += val[i].value + ',';
                }
            }
            var str = str.slice(0, str.length - 1);

            $.ajax({
                type: "GET",
                url: "get_state.php",
                data: 'country_id=' + str,
                success: function (data) {
                    $("#state-list").html(data);
                }
            });
        }

GET_STATE.PHP

<?php
  require_once("DBController.php");
  $db_handle = new DBController();
   if(!empty($_GET['country_id'])) {
    $coun_id = $_GET["country_id"];           
    $query ="SELECT * FROM states WHERE countryID IN ($coun_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
 }
}
?>

如何使用复选框而不是 <select> 加载数据

Answer 1

试试这个也许对你有帮助

<div class="row">
  <label>Country:</label><br /> 
     <?php
         foreach ($countryResult as $country) {
     ?>
          <div class="form-check">
                        <input class="form-check-input country-list" type="checkbox" name="country[]"  onChange="getState();" value="<?php echo $country["id"]; ?>">
                        <label class="form-check-label" for="<?php echo $country["id"]; ?>">
                            <?php echo $country["country_name"]; ?>
                        </label>
                    </div>
                    <?php
                }
                ?>
        </div>
        <div class="row">
            <label>State:</label>
            <select name="state[]" id="state-list" class="demoInputBox" multiple size=5>
                <option value="">Select State</option>
            </select>
        </div>

脚本

function getState() {
            var str = '';
            var val = document.getElementsByClassName('country-list');
            for (i = 0; i < val.length; i++) {
                if (val[i].checked) {
                    str += val[i].value + ',';
                }
            }
            var str = str.slice(0, str.length - 1);

            $.ajax({
                type: "GET",
                url: "get_state.php",
                data: 'country_id=' + str,
                success: function (data) {
                    $("#state-list").html(data);
                }
            });
        }