Question

我有两张桌子，省和区。我想填充一个选择字段，其中选项为区域名称，基于在另一个选择中选择的省份。 Districts表有一个ProvinceID字段，用于引用它所属的省份。我知道这是可行的，我只是想不出来。我还想创建和更新新的区域选择而不刷新页面。

更新：我用PHP和MySQL编写它，尽可能少地使用jQuery。

Answer 1

为了在没有AJAX的情况下执行此操作，请预先填充Javascript数据集...警告，如果您有大量数据，这可能会很慢，但如果它是一个可管理的列表长度，您可以节省多个AJAX请求加载的一些开销同样的数据一遍又一遍。

var provinces = {};
provinces['province_a_id'] = [
  { name:'District A', id:'district_a_id' },
  { name:'District B', id:'district_b_id' }
];
provinces['province_b_id'] = [
  { name:'District C', id:'district_c_id' },
  { name:'District D', id:'district_d_id' }
];

function getDistricts( referenced_select ) {
  var selected_province = $(referenced_select).val();
  var district_select = $('#districts');
  district_select.empty();
  if ( provinces[selected_province] ) {
    $.each( provinces[selected_province], function(i,v) {
      district_select.append( $('<option value="' + v['id'] + '">').text( v['name'] ) );
    } );
  }
}

$(document).ready( function() {
  $('#provinces').bind( 'change', function() {
    getDistricts(this);
  } );
} );

- HTML

<select id="provinces" name="provinces">
  <option value="province_a_id">Province A</option>
  <option value="province_b_id">Province B</option>
</select>
<select id="districts" name="districts">
</select>

Answer 2

创建一个php脚本并将其命名为dp.php（dp，data_provider的缩写，使用您喜欢的任何名称）。在dp.php中

// get province id passed in via `post` or `get`
$pid = $_REQUEST['pid'];

// get the districts in that province
$query = "SELECT `district_id`, `district` FROM `districts` WHERE province_id` ='$pid'";

// link to your database
$link = mysqli_connect(HOST, USER, PASS, DBNAME);

// execute your query
$result = mysqli_query($link, $query);

// parse the options
while($row = mysqli_fetch_assoc($result)) {
  $options .= '<option value="' . row['district_id'] . '">' . $row['district'] . "</option>\n";
}

// send options
echo $options

在页面中使用以下标记：

<select id="province" name="province">
  <option value="ny">New York</option>
  ...
</select>

<select id="district" name="district">
</select>

包含以下jQuery：

// whenever a different province is selected
$('#province').change(function() {
  // remove all options in district select
  $('#district').html('');
  // find the new province selected
  var my_province = $('#province').val();
  // get new options from server and put them in your district select
  $('#district').get('path/to/dp.php?pid=' + my_province);
)};

Answer 3

您没有说明您正在使用的服务器端技术（如果有）。这是ASP.net中的一个示例 - 它应该指向正确的方向：

http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET

Answer 4

我实际上是使用jQuery和post自己想出来的。在主要选择上，我添加了onchange =“getDistricts（）”并将其用于该函数：

function getDistricts()
{
    var province_id = $("#provinces").val();
    $.post("handler.php",
    {
        "mode" : "get_districts",
        "pid" : province_id
    },
    function(data)
    {
        $("#districts").html(data);
    }, "text");
}

然后在handler.php中，我有一个捕获该模式的案例，并运行以下代码：

<query on districts table>
while($row = $sql->fetchrow($result);
{
    $id = $row['id'];
    $name = $row['name'];
    $html .= "<option value='$id' id='$id'>$name</option>";
}
echo $html;

我不是这个解决方案的粉丝，并且真的想要更好的东西，但它确实做了我现在需要做的事情。我希望这可以帮助其他人。

动态创建和填充选择

4 个答案: