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]]"

如何将其附加到下拉框？例如像这样：

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

我的尝试失败了，除了第一个＆＃34;请选择＆＃34;

时，选择框为空

这里我删除了第一个选项，并尝试追加数据：

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

编辑：一些更完整的代码所以这里是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);
        })
    });
}

我的rails控制器：

  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字符串。< / p>

此外，您尝试将元素附加到不会产生任何效果的已删除选项，您需要返回到选择标记选择器并附加生成的内容。

＆＃13;

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
      });
    }));

＆＃13;

<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>

＆＃13;

Answer 2

您不能append采用该格式的数据，并希望jQuery知道创建option元素。首先，使用JSON.parse(data)以JSON格式获取数据，并使用.each()创建option元素。

Answer 3

您应首先使用JSON.parse()解析JSON，然后附加到select

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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)

jquery将数据附加到选择框

4 个答案: