0

私はまだJQuery、Javascriptに慣れていませんが、これは私が持っているものです:

これが私のスクリプトです：

/* Check for zip code input */
$('#editZipCode').keyup(function() {

    var inputString = $('#editZipCode').val();

    if(inputString.length == 5) {   

    $.ajax({
        url: base_url+"/zip_code_search/"+inputString,

        success: function(data) {

            if(data.length > 0) {

                var parts = data.split(':');

                $('select[name="city"] option').filter(function() { return $(this).text() == parts[0]; }).prop('selected', true);
                $('select[name="state"] option').filter(function() { return $(this).text() == parts[1]; }).prop('selected', true);

            }else{

                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);

            }
        }

    });


    }else{
                $('select[name="city"] option[value="0"]').prop('selected', true);
                $('select[name="state"] option[value="0"]').prop('selected', true);
    }

});

これが私のhtmlです：

<form action="" method="">

 <input type="text" id="editZipCode" name="zip_code">

 <select id="StateOption" name="state">
   <option value="0">-Select-</option>
   <option value="AK">AK</option>
   <option value="AL">AL</option>
   <option value="AR">AR</option>
   <option value="AZ">AZ</option>
 </select>

 <select id="CityOption" name="city">
   <option value="0">-Select-</option>
   <option value="ADAK">ADAK</option>
   <option value="AKIACHAK">AKIACHAK</option>
   <option value="AKIAK">AKIAK</option>
 </select>

</form>

私が直面している問題は、CityOptions ドロップダウンの選択されたオプションが設定されないことです。StateOptions ドロップダウンは正常に機能します。

郵便番号を入力すると、StateOption ドロップダウン ボックスが、CityOption ではなく、ajax 呼び出しから返されたものと一致するものに設定されます。

パーツ[0]またはパーツ[1]をコンソールに記録すると、入力フィールドに入力された郵便番号に一致する市/州が両方とも出力されますが、市オプションではなく、州オプションのみが一致する値に設定されます.

ここで明らかな何かが欠けているだけですか？

前もって感謝します！

ps http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.jsを使用していますが、それが重要ですか?

4

1 に答える 1

1

私はこの行に少し混乱しています：

.filter(function() { return $(this).text() == parts[0]; }) 私はあなたの意図を完全には理解していません。でもとにかく続けます。

動作する例なしでコードを完全にデバッグするのはちょっと難しいですが、可能な解決策を提供しますが、主にあなたが望むことをデバッグ/テストする方法です.

まず、上記の行を次のように変更します。

$('select[name="city"] option[value="'+ parts[0] +'"]').prop('selected', true);

しかし、それは重要ではないかもしれません。

何が起こっているかをテストするには、console.log で正しいパスにいます。クロムを使用している場合は、debugger;直後に追加しvar parts = data.split(':'); ます。これにより、コードがここで一時停止し、テストを行うことができます (開発者ツールを開く必要があります)。コンソール タブで、コードのその時点でテストできるようになりました。したがって、入力するpartsと、2 つの項目の配列が出力されます。この力は、次のようなコンソールでテストできることから生まれます。

$('select[name="city"] option[value="'+ parts[0] +'"]')

これは、一致する場合はオプション オブジェクトを返す必要があります。そうでない場合は、[]jQuery がページをクエリして一致が見つからなかったという意味になります。prop('selected',true);一致する場合は、最後に を 除いてそのコードをもう一度試して、機能しているかどうかを確認できます。

これは、重要なポイントでデバッグし、jQuery が何をしているかについてもう少し理解するのに役立つことを願っています。あなたは jQuery マスターへの道を歩んでいます!

于 2013-11-13T17:56:29.937 に答える