Question

我正在使用此网站http://jsfiddle.net/Q6h5s/中的信息来创建城市和州的下拉菜单。选择州后，应选择属于该州的城市。但是所有城市都在装载。我对Javascript不太熟悉，所以我无法弄清楚我犯了哪个错误。

这是我的代码

<script>

    $("#state").change( function(){
        if($(this).data('options') == undefined){
            $(this).data('options',$('#city-name option').clone());
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[state=' + id + ']');
        $('#city-name').html(options);
    });
</script>

State:
<select id="state">
<?php
    $fs = new fsCreator();
    $cityState = $fs->loadCityState();
    $dbh = new DatabaseHandler();

    echo '<option value="0">State</option>';
    $temp = null;
    $sep = ',';
    $index = 0;
    $max = sizeof($cityState);
    for($i = 0; $i< $max; $i++){
        if(!($temp == substr($cityState[$i], 0, strpos($cityState[$i], $sep)))){
            $index++;
            $temp = substr($cityState[$i], 0, (strpos($cityState[$i], $sep)));
            echo '<option value="'.($index).'">'.(substr($cityState[$i], 0, strpos($cityState[$i], $sep))).'</option>';
        }
    }
?>
</select>
City:
<select id="city-name">
<?php
    $index = 0;
    $cityIndex = 0;
    $temp = null;
    for($i = 0; $i < $max; $i++){
        if(!($temp == substr($cityState[$i], 0, strpos($cityState[$i], $sep)))){
            $index++;
            $temp = substr($cityState[$i], 0, strpos($cityState[$i], $sep));
        }
        $cityIndex++;
        echo '<option state="'.($index).'value="'.($cityIndex).'">'.(substr($cityState[$i], (strpos($cityState[$i], $sep)) + 1)).'</option>';
    }
?>
</select>

Answer 1

state属性设置不正确，这是您用来过滤的内容。
你最后错过了"。

echo '<option state="'.($index).'" value="'.($cityIndex).'">'.(substr($cityState[$i], (strpos($cityState[$i], $sep)) + 1)).'</option>';
                                 ^^

此外，您正在尝试在创建对象之前将事件处理程序绑定到对象有不同的方法来解决这个问题

事件委托，将处理程序绑定到文档

$(document).on("change","#state", function(){
    if($(this).data('options') == undefined){
        $(this).data('options',$('#city-name option').clone());
    }
    var id = $(this).val();
    var options = $(this).data('options').filter('[state=' + id + ']');
    $('#city-name').html(options);
});

使用文档加载事件

$(document).ready(function(){
    $("#state").change( function(){
        if($(this).data('options') == undefined){
            $(this).data('options',$('#city-name option').clone());
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[state=' + id + ']');
        $('#city-name').html(options);
    });
});

将代码放在标记

中

State:
<select id="state">
...
</select>
<script>

    $("#state").change( function(){
        if($(this).data('options') == undefined){
            $(this).data('options',$('#city-name option').clone());
        }
        var id = $(this).val();
        var options = $(this).data('options').filter('[state=' + id + ']');
        $('#city-name').html(options);
    });
</script>

尝试使用select options标记和javascript根据州值加载城市

1 个答案: