在更改上填充選擇菜單

Question

我有一個引導選擇菜單，我想從另一個選擇菜單填充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代碼為“ good”。

但是（對於PHP）您必須使用准備好的語句...

希望這可以幫助！