尝试使用select options标记和javascript基于状态值加载城市

我用这个网站上的信息创建了一个城市和州的下拉菜单。当选择该州时，应选择属于该州的城市。然而，所有的城市都在加载。我对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>

状态属性设置不正确，这是您用来筛选的。 你错过了一个结尾

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

使用文档加载事件

$(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>

---

我不能有状态和一个单独的值属性？？你能解释得更详细一点吗？你可以有两个属性非常感谢。它没有解决这个问题，但是你还是指出了我的一个大错误。

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>