使用JavaScript函数中传递的变量

Question

我对所有国家/地区都有选择，然后调用onChange函数，以根据以下代码获取该国家/地区的城市列表：

<select name="country" id="country" onChange="getCity(this.value)">

我有如下代码从数据库中获取城市列表：

<script language="javascript" type="text/javascript">
function getCity() {
    $(function(countryId) {
         var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = 'countryId'";

    $result = pg_query($query);
    if (!$result) {
        echo "Problem with query " . $query . "<br/>";
        echo pg_last_error();
        exit();
    }
    printf ("<option value=Select>Select a City</option>");
    while($myrow = pg_fetch_assoc($result)) {

     printf ("<option value=$myrow[city]>$myrow[city]</option>");

}?></select>';  
        document.getElementById('citydiv').innerHTML= str;
    });
}
</script>

如何传递变量countryId？

如果我使用以下尝试使用变量countryId，则我的代码无法正常工作。

var str = '<select name="city" id="city">
<?php $query = "SELECT city FROM cities where country = 'countryId'";

但是，如果我更改该值并手动引入一个特定值，则它会起作用：

var str = '<select name="city" id="city">
<?php $query = "SELECT city FROM cities where country = 'Albania'";

请注意，我的var str正在存储以下所有代码，以编写城市Div：

var str ='

var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = 'Spain'"; 
    $result = pg_query($query);
    if (!$result) {
        echo "Problem with query " . $query . "<br/>";
        echo pg_last_error();
        exit();
    }
    printf ("<option value=Select>Select a City</option>");
    while($myrow = pg_fetch_assoc($result)) {

     printf ("<option value=$myrow[city]>$myrow[city]</option>");

}?></select>';  

更新

根据答案，我希望完成类似

<script language="javascript" type="text/javascript">
function Nadaquever(countryId) {
    $(function() {
         var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = ' + countryID + '"';          
         str += '$result = pg_query($query);';
         str += 'if (!$result) {';
         str += 'echo "Problem with query " . $query . "<br/>";';
         str += 'echo pg_last_error();';
         str += 'exit();';
         str += '}';
         str += 'printf ("<option value=Select>Select a City</option>");';
         str += 'while($myrow = pg_fetch_assoc($result)) {';
         str += 'printf ("<option value=$myrow[city]>$myrow[city]</option>");';
         str += '}?></select>';

document.getElementById('citydiv').innerHTML= str;
    });
}
</script>

但这不起作用

非常感谢

Answer 1

要在Javascript中附加变量，您必须使用+符号，请参见下面的代码。

var str = 'blah blah blah';
str += ' blah';
str += ' ' + 'and some more blah';

你也需要像这样传递国家ID

function getCity(countryId) {

Answer 2

您需要了解有关javascript字符串连接的信息

它必须像下面的代码一样进行更改。

[正确的代码]

var countryId = "myId";
var str = '<select name="city" id="city"><?php $query = "SELECT city FROM cities where country = ' + countryId + '"';

Answer 3

我看不到它将如何将您的SQL查询发送到您的数据库。 如果只是将Javascript字符串串联在一起，则最终会得到-一个包含一些PHP标记的字符串，而该标记从未出现在服务器上（尝试将必须拥有的str var记录到控制台，然后查看拥有的内容）。

您需要考虑应用程序的流程。 根据您尝试如何在select框中的选项更改时触发Javascript函数getCity()的方式，我假设您不想重新加载页面，因此您需要通过AJAX将SQL查询发送到数据库。

因此，假设您的标记如下所示：

<div id="citydiv">
  <select id="country" name="countryID">
    <option value="Select">Select a Country</option>
    <option value="Albania">Albania</option>
  </select>
  <select id="city" name="city">
    <option value="Select">Select a City</option>
  </select>
</div> 

您可以使用jQuery来生成city字段的选项，如下所示：

$(function(){
  $('#country').on('change',function(){
    $.ajax({
      url: '/getCities.php',
      method: "POST",
      data: {countryID: $('#country').val() }
    })
    .done(function(data){
      $('#city').html(data);
    });
  });
});

这会将所有onchange事件发送到getCities.php文件，您可以在其中从$_POST['countryID']检索countryID ，然后将其插入到SQL查询中，检索结果集，然后打印出选择字段的选项。 然后，jQuery将select字段的选项设置为PHP脚本的结果。

同样，在查询数据库以提高安全性时值得考虑使用Postgres 准备的语句 。