2

StackOverflowを閲覧したところ、状況に近いものの正確ではない質問/回答がいくつか見つかりました。私はこの例に従っています：

http://www.javascriptkit.com/javatutors/selectcontent2.shtml

そして私のJavaScriptコードは次のようなものです：

var cityList = document.selectionForm.cityListBox;
var cities = new Array();

cities[0] = "";
cities[1] = ["Eugene|eugeneValue", "Portland|portlandValue", "Salem|salemValue"];
cities[2] = ["Bellingham|bellinghamValue", "Onalaska|onalaskaValue", "Seattle|    seattleValue"];

function updateCities(cityGroup) 
{
    cityList.options.length = 0;

    if (cityGroup > 0)
    {
        for (i = 0; i < cities[cityGroup].length; i++)
        {
            cityList.options[cityList.options.length] = new Option(cities[cityGroup][i].split("|")[0], cities[cityGroup][i].split("|")[1]);
        }   
    }
}

そして、私のHTMLコードは次のようになります。

<form name="selectionForm">
    <select name="stateListBox" size="3" style="width: 150px" onchange="updateCities(this.selectedIndex);">
        <option selected>Select a State >></option>
        <option value="oregon">Oregon</option>
        <option value="washington">Washington</option>
    </select>

    <select name="cityListBox" size="3" style="width: 150px" onclick="alert(this.options[this.options.selectedIndex].value);">
    </select>
</form>

私の知る限り、これは上記のリンクで説明されているように機能するはずです。JavaScript KitのWebサイトで素晴らしい経験をしましたが、今回は何かが足りないと思います。

これを実際にページに公開すると、州をクリックできますが、予想どおり、都市ボックスには何も表示されません。

誰かがここで問題を見ることができますか？

どんな助けでも大歓迎です。

PS-私が逃した二重の投稿がある場合はお詫び申し上げます。どんな参考文献も大歓迎です。

4

3 に答える 3

5

2つのリストの同期を維持する必要がないjQueryを使用したより読みやすいソリューション（州と都市はjavascriptデータ構造で定義されています）

HTML：

<form name="selectionForm">
    <select name="states" id="states" size="3" style="width: 150px">
        <option selected>Select a State >></option>
    </select>

    <select name="cities" id="cities" size="3" style="width: 150px"></select>
</form>

javascript：

jQuery(function($) {
    initCities();

    function initCities() {
        var statesAndCities = {
            'Oregon': ['Eugene', 'Portland', 'Salem'],
            'Washington': ['Bellingham', 'Onalaska', 'Seattle']
        };

        //populate states
        $.each(statesAndCities,function(k,v){$('#states').append('<option>' + k + '</option>');});

        //populate cities
        $('#states').change(function(){
            var $cities = $('#cities');
            $cities.html("");
            var cities = statesAndCities[$(this).val()];
            $.each(cities,function(k,v){$cities.append('<option>' + v + '</option>');});
        });
    }

});

デモ：

http://jsfiddle.net/82frv/1/

于 2011-05-06T20:40:49.123 に答える
3

のforループでは、ステートメントは（Capital L）への 変更でupdateCities始まりますcitylist.optionscitylistcityList

その後動作します。

于 2011-05-06T20:27:39.413 に答える
1

たった2つのこと：

  • document.forms.selectionFormが必要です。フォームはそのコレクション内にあります

  • スクリプトの記述方法では、すぐにアクセスしようとするため、タグの後のページに配置する必要があります

他の変更は必要ありません。

于 2011-05-06T20:31:02.557 に答える