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

Trying to load cities based on state value using select options tag and javascript

本文关键字：javascript 城市 加载 select options      更新时间：2023-09-26

我使用的是该网站的信息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>

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>
相关文章：