三個動態下拉

我試圖做一個簡單的表格，有3個要素：三個動態下拉

國家
市
網站。

我正在用php,mysql（獲取數據）和腳本。

我得到它的工作...之類的...

當我選擇的國家，即：英格蘭，我得到填充了英國城市，但在「網站」下拉列表中下一個下拉列表是不填充除非我手動更改城市下拉菜單。

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script> 
<script> 
    function getCity(val) { 
     $.ajax({ 
      type: "POST", 
      url: "getcity.php", 
      data:'country='+val, 
      success: function(data){ 
       $("#city").html(data); 
      } 
     });getsite(); 
    } 

    function getSite(val) { 
     $.ajax({ 
      type: "POST", 
      url: "getsite.php", 
      data:'city='+val, 
      success: function(data){ 
       $("#site").html(data); 
      } 
     }); 
    } 
</script>

選擇：

<select class="form-control" name="country" id="country" onChange="getCity(this.value);" required>

和

<select class="form-control" name="city" id="city" onChange="getSite(this.value);" required>

來源

2017-08-08 FM86

*「...但」網站「下拉列表不會填充，除非我手動更改城市下拉菜單」* - 因爲這就是它的編程方式：'id =「city」onChange =「getSite（this.value） ;''，'getSite'方法改變'＃site'的HTML：'$（「＃site」）。html（data）'。 –

你期待的行爲是什麼？ – scrappedcola

@SpencerWieczorek其實他在getCity（）中的ajax調用之後調用getSite（）。 –

更新：有在javascript三大誤區。

1.首先調用正確的函數;編輯該行：

 });getsite();

到：

 });getSite();

2.然後，確保你傳遞城市名作爲參數：

 });getSite($("#city").val());

或編輯功能本身在發出ajax請求之前查看它，通過修改此行：

 data:'city='+val,

成爲：

 data:'city='+$("#city").val(),

正因爲如此，getSite()被稱爲AJAX請求發出之後，前返回結果。它具有success函數內被移動：

 success: function(data){ 
      $("#city").html(data); 
      getSite($("#city").val()); 
     } 
    });

測試：下面的代碼示例不會什麼問（我沒有刻意去重建php文件）：

<html><head> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
</head><body> 
<script> 
    function getCity(val) { 
     var data = '<option value="London">London</option><option value="Manchester">Manchester</option>"'; 
     $("#city").html(data); 
     getSite($("#city").val()); 
    } 
    function getSite(val) { 
     if (val == 'London') { 
      var data = '<option value="Westminster Abbey">Westminster Abbey</option><option value="Piccadilly Circus">Piccadilly Circus</option>"'; 
     } else if (val == 'Manchester') { 
      var data = '<option value="Old Trafford">Old Trafford</option><option value="Heaton Park">Heaton Park</option>"'; 
     } 
     $("#site").html(data); 
    } 
</script> 

Country:<select class="form-control" name="country" id="country" onChange="getCity(this.value);" required> 
    <option value="Belize">Belize</option> 
    <option value="England">England</option> 
</select> 
City: <select class="form-control" name="city" id="city" onChange="getSite(this.value);" required></select> 
Site: <select class="form-control" name="site" id="site" required></select> 
</body></html>

來源

2017-08-08 21:26:38 simlev

試過了，沒有工作。但是謝謝你！ – FM86

@SpencerWieczorek我是網絡工程師，而不是程序員。如果你能詳細說明我如何解決這個問題，那將非常感激。乾杯。 – FM86

@ FM86在您的代碼中發現了另一個錯誤，並添加到答案中。 – simlev

好。問題解決了。

我改變了一點點的做法：

腳本

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#country').on('change',function(){ 
      var countryID = $(this).val(); 
      if(countryID){ 
       $.ajax({ 
        type:'POST', 
        url:'getcountrycitysite.php', 
        data:'country='+countryID, 
        success:function(html){ 
         $('#city').html(html); 
         $('#site').html('<option value="">Select city first</option>'); 
        } 
       }); 
      }else{ 
       $('#city').html('<option value="">Select country first</option>'); 
       $('#site').html('<option value="">Select city first</option>'); 
      } 
     }); 

     $('#city').on('change',function(){ 
      var cityID = $(this).val(); 
      if(cityID){ 
       $.ajax({ 
        type:'POST', 
        url:'getcountrycitysite.php', 
        data:'city='+cityID, 
        success:function(html){ 
         $('#site').html(html); 
        } 
       }); 
      }else{ 
       $('#site').html('<option value="">Select city first</option>'); 
      } 
     }); 
    }); 
</script>

（...）

<div class="form-group"> 
    <label>Country</label> 
    <select class="form-control" name="country" id="country" required> 
     <option disabled selected value> -- select an option -- </option> 
     <?php 
     require_once ("settings.php"); 

     $link = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname); 
     $query = "SELECT * FROM country"; 

     if (mysqli_query($link, $query)) { 
      $result = mysqli_query($link, $query); 
      while ($row = mysqli_fetch_array($result)) { 
       echo '<option value = '.$row["id"].'>'.$row["country"].'</option>'; 
      } 
     } else { 
      echo "blah"; 
     } 

     mysqli_close($link); 
     ?> 
    </select> 
</div> 
<div class="form-group"> 
    <label>City</label> 
    <select class="form-control" name="city" id="city" required> 
     <option disabled selected value> -- select an option -- </option> 
    </select> 
</div> 
<div class="form-group"> 
    <label>Site</label> 
    <select class="form-control" name="site" id="site" required> 
     <option disabled selected value> -- select an option -- </option> 
    </select> 
</div>

（...）

正如你看到我刪除onChange =「getCity（this.value）;在選擇和創建一個單一的PHP腳本獲取城市和網站值：

<?php 
require_once("settings.php"); 

if (isset($_POST["country"]) && !empty($_POST["country"])) { 

    $link  = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname); 
    $query  = 'SELECT * FROM city WHERE idcountry = ' . $_POST["country"]; 
    $resultcity = mysqli_query($link, $query); 

    $rowcnt = mysqli_num_rows($resultcity); 


    if ($rowcnt > 0) { 
     echo '<option value="">Select City</option>'; 
     while ($row = mysqli_fetch_array($resultcity)) { 
      echo '<option value="' . $row['id'] . '">' . $row['city'] . '</option>'; 
     } 
    } else { 
     echo '<option value="">City not Available</option>'; 
    } 
} 

if (isset($_POST["city"]) && !empty($_POST["city"])) { 

    $link  = @mysqli_connect($dbhostname, $dbusername, $dbpassword, $dbname); 
    $query  = 'SELECT * FROM site WHERE idcity = ' . $_POST["city"]; 
    $resultsite = mysqli_query($link, $query); 

    $rowcnt = mysqli_num_rows($resultsite); 


    if ($rowcnt > 0) { 
     echo '<option value="">Select site</option>'; 
     while ($row = mysqli_fetch_array($resultsite)) { 
      echo '<option value="' . $row['id'] . '">' . $row['site'] . '</option>'; 
     } 
    } else { 
     echo '<option value="">Site not available</option>'; 
    } 
} 
?>

來源

2017-08-09 00:14:37 FM86

https://github.com/nfosci/input-fetcher-dropdown提供了一個解決此問題的選項。

來源

2017-08-13 01:24:23 user8277864

三個動態下拉

回答

相關問題