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，＆amp;等......

选择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填充“class”，只需创建一个名为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 On change event：

$(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文件中添加这样的函数，例如，一个填充所有城市列表的函数，不依赖于任何选择：< / p>

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）你必须使用准备好的语句......

希望这有帮助！

填充选择菜单onChange

1 个答案: