javascript - 填充选择菜单 onChange

Question

我有一个 Bootstrap 选择菜单，我想从另一个选择菜单填充 onChange。我认为从 PHP 返回数据时遇到一些问题。

选择菜单:

            <div class="col-md-6" style="width:100%;margin-bottom: 10px;">
                <div class="input-group" style="width:100%;">
                    <span style="width:50%;" class="input-group-addon" id="basic-addon1">Municipality *</span>
                    <select class="selectpicker" name="object_Municipality" id="object_Municipality">
                        <option value="0" selected="selected" >Municipality *</option>                          
                    </select>
                </div>
            </div>

Javascript 函数(从另一个选择菜单调用 onChange)来填充选择菜单:

function populate_obcina(value) {
if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("object_Municipality").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","get_Municipality.php?q="+value,true);
  xmlhttp.send();
}   

我的 get_Municipality.php 文件:

    <?php
    require_once 'functions.php';
    $conn = dbConnect();

    $q =($_GET['q']);

        $municipality = mysqli_query($conn, "SELECT id,municipality FROM municipalities  WHERE `region`='".$q."'") or die(file_put_contents('error_querry.txt', print_r("Error: " . mysqli_error($conn), true)));

    while ($row = mysqli_fetch_array($municipality, MYSQLI_ASSOC)) {

      $fp = fopen("while_loop.txt", "a") or die("Couldn't open log file for writing.");
      fwrite($fp, PHP_EOL .'<option value="'.$row['id'].'">'.$row['municipality'].'</option>');
      fflush($fp);
      fclose($fp);      

      //In the while_loop.txt I get lines like this:
      //<option value="1">Chicago</option>
      //so I guess the problem is the way I am returning the results    

  echo '<option value="'.$row['id'].'">'.$row['municipality'].'</option>';
    }

    mysqli_close($conn);
    ?>

这是我得到的返回:

<option value="1">Chicago</option><option value="2">LA</option><option value="3">California</option>

Answer 1

我已经做过这种工作，但我的做法有所不同，因为我必须能够在事件上填充多种选择，无论是否使用预先选择的数据，...使用 Jquery、bootstrap 等于...

选择 HTML:

<div class="col-md-6" style="width:100%;margin-bottom: 10px;">
    <div class="input-group" style="width:100%;">
        <span style="width:50%;" class="input-group-addon" id="basic-addon1">Municipality *</span>
        <select class="selectpicker" name="object_Municipality" id="object_Municipality">
            <option value="0" selected="selected" >Municipality *</option>                          
        </select>
    </div>
</div>

Javascript/Jquery 填充“类”，只需创建一个名为 PopulateList.js 的文件，如下所示:

function PopulateList(){ }

PopulateList.municipality = function(element,choice){
    $(document).ready(function(){
        $.ajax({
            type : 'POST',
            url : './getMunicipalitiesChoice.php',
            data  : {'choice':choice},
            dataType : 'json',
            error : function(response){
                alert('SOMETHING WENT WRONG');
            },
            success : function(response){
                element.html(response);
            }
        });
    });
};

JQuery 更改事件:

$(document).on('change','#listFiringTheEvent',function(){
    //Call the populate function here
    populateList.municipality('#object_Municipality',$(this).val());
});

PHP getMunicipalitiesChoice.php:

<?php
    require_once 'functions.php';
    if(isset($_POST['choice'])){
        $conn = dbConnect();
        $q = $_POST['choice'];
        $result = '';
        $municipality = mysqli_query($conn, "SELECT id,municipality FROM municipalities  WHERE `region`='".$q."'") or die(file_put_contents('error_querry.txt', print_r("Error: " . mysqli_error($conn), true)));

        while ($row = mysqli_fetch_array($municipality, MYSQLI_ASSOC)) {
            $fp = fopen("while_loop.txt", "a") or die("Couldn't open log file for writing.");
            fwrite($fp, PHP_EOL .'<option value="'.$row['id'].'">'.$row['municipality'].'</option>');
            fflush($fp);
            fclose($fp);
            $result.='<option value="'.$row['id'].'">'.$row['municipality'].'</option>';
        }
        mysqli_close($conn);
        echo json_encode($result);
    }else{
        //If you're here, that's because the file has been called with a "invalid" choice (not set)
    }
?>

现在，正如您所说，如果您还有其他一些列表需要填充，只需在 PopulateList.js 文件中添加如下所示的函数，例如，一个用所有城市填充列表的函数，而不依赖于任何选择:

PopulateList.municipalities = function(element){
    $(document).ready(function(){
        $.ajax({
            type : 'POST',
            url : './getMunicipalities.php',
            dataType : 'json',
            error : function(response){},
            success : function(response){
                element.html(response);
            }
        });
    });
};

或者例如，当您选择“市镇”时填写“城市”列表:

PopulateList.citiesOnMunicipality= function(element,municipality){
    $(document).ready(function(){
        $.ajax({
            type : 'POST',
            url : './getCitiesOnMunicipality.php',
            data : {'municipality':municipality},
            dataType : 'json',
            error : function(response){},
            success : function(response){
                element.html(response);
            }
        });
    });
};

在我的示例中，我假设您的 html 和 php 代码“良好”。

但是(对于 PHP)你必须使用准备好的语句...

希望这有帮助!