セレクトボックスオプションまたはオートコンプリートの選択に応じて、JSONのデータでテキスト入力を設定します。

Question

私はクラシファイドサイトを持っています。ユーザーは、Googleマップのサイドバーの場所を示す新しい広告の場所情報を入力します。しかし、適切な郵便番号を使用しない限り、Googleマップは正しく表示されません。私はこれを修正しようとしましたが、できませんでした。ユーザーは通常、彼らは郵便番号を知らない、おそらく彼らはそれを無視します。

私はJSONファイルに郵便番号情報を格納し、ユーザーが状態を選択したときにそのデータを取得したいので、郵便番号は郵便番号のテキストフィールドに自動的に生成されます。たとえば、ユーザーがselectboxのドロップダウンリストから「Kuala Lumpur」を選択すると、JSONファイルに格納されているデータから郵便番号のテキストフィールドに「57000」が自動的に生成されます。

My JSfiddle

<label>State</label> 
<select name="cp_state" id="cp_state" class="dropdownlist required"><option value="">-- Select --</option><option value="Kuala Lumpur" selected="selected">Kuala Lumpur</option><option value="Labuan">Labuan</option><option value="Malacca">Malacca</option>    </select> 

<label>Zip/Postal Code </label> 
<input name="cp_zipcode" id="cp_zipcode" type="text" class="text" placeholder="Enter zipcode" /> 

JSONデータ

[ 
    { 
     "czipcode": "57000", 
     "cstate": "Kuala Lumpur" 
    }, 
    { 
     "czipcode": "75000", 
     "cstate": "Labuan" 
    }, 
    { 
     "czipcode": "87000", 
     "ctate": "malacca" 
    } 
] 

Answer 1

は最後に、私は私の質問を解決しました。私はAjax AutoComplete for jQueryを使用して、ユーザーがjson値と常に一致するテキストフィールド内に入力するときに表示されるオートコンプリート機能を追加しました。提案がクリックされると、郵便番号のテキストフィールドがjsonに格納されたそれぞれのデータで更新されます。

<label>State</label> 
<input type="text" name="cstate" id="autocomplete"/><br><br><br> 
<label>Zipcode</label> 
<input id="zipcode" type="text" name="zipcode"/> 

<script type="text/javascript" src="au/scripts/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="au/scripts/jquery.mockjax.js"></script> 
<script type="text/javascript" src="au/src/jquery.autocomplete.js"></script> 
<script> 
var cstates = [ 
    { value: 'Kuala Lumpur', data: '57000' }, 
    { value: 'Labuan', data: '75000' }, 
    { value: 'Malacca', data: '87000' } 
    ]; 

$('#autocomplete').autocomplete({ 
    lookup: cstates, // lookup suggestion from cstates json 
    lookupLimit: 2,  //limit suggestion result display 
    onSelect: function (suggestion) { 
     $('#zipcode').val(suggestion.data);//set zipcode textfield with the data of state clicked 
    } 
}); 
</script>