JQuery добавить данные, чтобы выбрать окно

Question

Я делаю AJAX вызов возвращает список государств, выглядит следующим образом:

"[["Alabama",1],["Alaska",2],["Arizona",3],["Arkansas",4],["California",5],["Colorado",6],["Connecticut",7],["Delaware",8],["Florida",9],["Georgia",10],["Guam",52],["Hawaii",11],["Idaho",12],["Illinois",13],["Indiana",14],["Iowa",15],["Kansas",16],["Kentucky",17],["Louisiana",18],["Maine",19],["Maryland",20],["Massachusetts",21],["Michigan",22],["Minnesota",23],["Mississippi",24],["Missouri",25],["Montana",26],["Nebraska",27],["Nevada",28],["New Hampshire",29],["New Jersey",30],["New Mexico",31],["New York",32],["North Carolina",33],["North Dakota",34],["Northern Mariana Islands",57],["Ohio",35],["Oklahoma",36],["Oregon",37],["Pennsylvania",38],["Philippine Islands",56],["Puerto Rico",53],["Rhode Island",39],["South Carolina",40],["South Dakota",41],["Tennessee",42],["Texas",43],["Utah",44],["Vermont",45],["Virgin Islands",54],["Virginia",46],["Washington",47],["Washington DC",48],["West Virginia",49],["Wisconsin",50],["Wyoming",51]]" 

Как я могу добавляемое это в выпадающем DropDownBoxую? , например. как это:

<option value="2" style="display: block;">Alaska</option> 

Моя попытка терпит неудачу и выберите поле пусто, кроме первого «Выберите»:

Здесь я удаление всех вариантов, кроме первого, и пытается добавить данные:

selected_item.closest('.address-table').find('.state_select option:gt(0)').remove().append(data); 

EDIT: некоторые более полный код так вот функция JS, selected_item страны переключатель, поэтому я хочу, чтобы тянуть назад все государства или территории для этой страны:

function filterTerritory(selected_item) { 
    var country_id = selected_item.val(); 
    $.ajax({ 
     url: '/addresses/update_states', 
     data: { 
      country_id: country_id 
     }, 
     dataType: "script", 
     success: (function (data) { 
      selected_item.closest('.address-table').find('.state_select option:gt(0)').remove().append(data); 
     }) 
    }); 
} 

мои рельсы контроллер:

def update_states 
    @states= get_states_list(params[:country_id]).pluck(:name, :id)  
    respond_to do |format| 
     format.json { render json: @states.as_json } 
    end 
    end 

Answer 1

JQuery не будет генерировать тег опции из массива или строки JSON, вместо этого вам нужно сгенерировать элементы либо как строку html, либо объект jQuery, используя массив, только после этого вы можете добавить другой элемент, добавив строку JSON.

Также вы пытаетесь добавить элемент к удаленному элементу, который не будет иметь никакого эффекта, вам нужно вернуться к селектору select select и добавить созданный контент.

var data = '[["Alabama",1],["Alaska",2],["Arizona",3],["Arkansas",4],["California",5],["Colorado",6],["Connecticut",7],["Delaware",8],["Florida",9],["Georgia",10],["Guam",52],["Hawaii",11],["Idaho",12],["Illinois",13],["Indiana",14],["Iowa",15],["Kansas",16],["Kentucky",17],["Louisiana",18],["Maine",19],["Maryland",20],["Massachusetts",21],["Michigan",22],["Minnesota",23],["Mississippi",24],["Missouri",25],["Montana",26],["Nebraska",27],["Nevada",28],["New Hampshire",29],["New Jersey",30],["New Mexico",31],["New York",32],["North Carolina",33],["North Dakota",34],["Northern Mariana Islands",57],["Ohio",35],["Oklahoma",36],["Oregon",37],["Pennsylvania",38],["Philippine Islands",56],["Puerto Rico",53],["Rhode Island",39],["South Carolina",40],["South Dakota",41],["Tennessee",42],["Texas",43],["Utah",44],["Vermont",45],["Virgin Islands",54],["Virginia",46],["Washington",47],["Washington DC",48],["West Virginia",49],["Wisconsin",50],["Wyoming",51]]'; 
 

 
$('#select') // get select 
 
    .find('option:gt(0)') // find options to remove 
 
    .remove() // remove the options 
 
    .end() // back to the previous selector 
 
    .append(
 
    JSON.parse(data) // parse the json 
 
    .map(function(v) { // generate jQuery object array to append 
 
     return $('<option>', { // create option using array element 
 
     text: v[0], // set text 
 
     value: v[1] // set value 
 
     }); 
 
    }));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select"> 
 
    <option value="a" style="display: block;">aaaa</option> 
 
    <option value="a" style="display: block;">aaaa</option> 
 
    <option value="a" style="display: block;">aaaa</option> 
 
</select>

Answer 2

Вы не можете просто append ваши данные в этом формате и ожидают jQuery знать, чтобы создать option элементы. Сначала используйте JSON.parse(data), чтобы получить данные в форме JSON, и используйте .each() для создания элемента option.

Answer 3

Вы должны сначала разобрать JSON с JSON.parse(), а затем добавить к select

var data = '[["Alabama",1],["Alaska",2],["Arizona",3],["Arkansas",4],["California",5],["Colorado",6],["Connecticut",7],["Delaware",8],["Florida",9],["Georgia",10],["Guam",52],["Hawaii",11],["Idaho",12],["Illinois",13],["Indiana",14],["Iowa",15],["Kansas",16],["Kentucky",17],["Louisiana",18],["Maine",19],["Maryland",20],["Massachusetts",21],["Michigan",22],["Minnesota",23],["Mississippi",24],["Missouri",25],["Montana",26],["Nebraska",27],["Nevada",28],["New Hampshire",29],["New Jersey",30],["New Mexico",31],["New York",32],["North Carolina",33],["North Dakota",34],["Northern Mariana Islands",57],["Ohio",35],["Oklahoma",36],["Oregon",37],["Pennsylvania",38],["Philippine Islands",56],["Puerto Rico",53],["Rhode Island",39],["South Carolina",40],["South Dakota",41],["Tennessee",42],["Texas",43],["Utah",44],["Vermont",45],["Virgin Islands",54],["Virginia",46],["Washington",47],["Washington DC",48],["West Virginia",49],["Wisconsin",50],["Wyoming",51]]'; 
 
var options = ''; 
 

 
JSON.parse(data).forEach(function(e) { 
 
    options += '<option value="'+e[1]+'" style="display: block;">'+e[0]+'</option>'; 
 
}) 
 

 
$('#state_select').empty().append(options);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="" id="state_select"> 
 
    <option value="a">A</option> 
 
</select>

Answer 4

вы можете сделать следовать: (например: https://jsfiddle.net/ananis/hwhp2nug/2/)

var out=''; 
for(i in data){ 
    out+="<option value="+data[i][1]+">"+data[i][0]+"</option>"; 
} 
$('select').append(out)