8

select2プラグインを使用して2つのチェーンされた自動入力選択フィールドを作成しようとしています最初の選択には国の名前(静的選択)が含まれ、2番目の選択には最初の選択から選択された国の州が表示されます私のコードは

<select id="country" name="country" size="1" class=" form-control">
<option></option>
<option value="1">USA</option>
<option value="2">Untied Kingdom</option>
<option value="3">France</option>
etc........
</select>
<select id="states" name="states" size="1" class="form-control">
<option></option>
</select>

JavaScript コード

$(document).ready(function() {
    $('#country').select2({
        placeholder: 'Select Country',
        allowClear: true
    });
    $('#state').select2({
        placeholder: 'Select State',
        allowClear: true
    });
    $('#country').change(function() {
            var selectedCountries = $('#countryoption:selected').val();
            var selectedCountries = 'id='+ selectedCountries;
            $.ajax({
                type: 'POST',
                url: 'http://localhost/CodeIgniter/countries/get_state/',
                dataType: 'html',
                data: selectedCountries,
                }).done( function( data ) {
                       data = $.map(data, function(item) {
                            return { id: item.id, text: item.name }; 
                        });
                        $('#state').select2({
                            data: data
                        });
                }
            })
    });
});

JSON で返された結果

{"id":"1","text":"Chigaco"}{"id":"4","text":"Albama"}{"id":"2","text":"Tulsa"} etc...........

これに役立つ例をたくさん検索しましたが、最初の選択で選択された国の州を表示し、select2 v4.0 を使用していることがわかっている 2 番目の選択に渡すだけで、何も正しく機能しません。 jquery v2

4

2 に答える 2

-2

json 応答でカンマを逃しました。

http://jsfiddle.net/jEADR/1570/

var data = [{"id":"1","text":"Chigaco"},{"id":"4","text":"Albama"},{"id":"2","text":"Tulsa"}];
var data2=[];
$.map(data, function(item) {
      data2.push( { id: item.id, text: item.text }); 
});
$('#state').select2({
       data: data2
 });
于 2015-05-14T21:42:37.663 に答える