用json选择js不起作用

Question

我正在尝试将 selectize.js 与 json 文件中的 json 数据一起使用以将“选项”附加到“选择”标签，但我做不到。请帮助我。

下面是我的代码。

  <script type="text/javascript">
$(function() {
    $.getJSON( "dist/cc.json", function( data ) {
                  data = data.smp_country_code;
                  alert(JSON.stringify(data));
                  $.each( data, function( key, val ) {
                     $(".cc").append( "<option value='" + key + "'>" + val + "</option>" );
               });
            });
});
</script>

<select id="select-state" class=""></select>

<script>
$('#select-state').selectize({
  valueField: 'country',
  labelField: 'country',
  searchField: 'country',
  options: [],
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
        url: 'http://localhost/maya/dist/country.json',
        type: 'GET',
        dataType: 'json',
        data: {
            country: query,
        },
        error: function() {
            callback();
        },
        success: function(res) {
            callback(res);
        }
    });
  }
});
</script>

这是我的 json 文件“cc.json”

{
"smp_country_code": {
        "0": "Select a state...",
        "AL":"Alabama",
        "AK":"Alaska",
        "AZ":"Arizona",
        "AR":"Arkansas",
        "CA":"California",
        "CO":"Colorado",
        "CT":"Connecticut",
        "DE":"Delaware",
        "DC":"District of Columbia",
        "FL":"Florida",
        "GA":"Georgia",
        "HI":"Hawaii",
        "ID":"Idaho",
        "IL":"Illinois",
        "IN":"Indiana",
        "IA":"Iowa",
        "KS":"Kansas",
        "KY":"Kentucky",
        "LA":"Louisiana",
        "ME":"Maine",
        "MD":"Maryland",
        "MA":"Massachusetts",
        "MI":"Michigan",
        "MN":"Minnesota",
        "MS":"Mississippi",
        "MO":"Missouri",
        "MT":"Montana",
        "NE":"Nebraska",
        "NV":"Nevada",
        "NH":"New Hampshire",
        "NJ":"New Jersey",
        "NM":"New Mexico",
        "NY":"New York",
        "NC":"North Carolina",
        "ND":"North Dakota",
        "OH":"Ohio",
        "OK":"Oklahoma",
        "OR":"Oregon",
        "PA":"Pennsylvania",
        "RI":"Rhode Island",
        "SC":"South Carolina",
        "SD":"South Dakota",
        "TN":"Tennessee",
        "TX":"Texas",
        "UT":"Utah",
        "VT":"Vermont",
        "VA":"Virginia",
        "WA":"Washington",
        "WV":"West Virginia",
        "WI":"Wisconsin",
        "WY":"Wyoming"
         }
}

它不起作用，请看图片

当我不使用 json 时，它是有效的。 下面的代码是不使用json数据的正常用法。

<select id="select-state">
        <option value="">Select a state...</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
        <option value="ND">North Dakota</option>
        <option value="OH">Ohio</option>
        <option value="OK">Oklahoma</option>
        <option value="OR">Oregon</option>
        <option value="PA">Pennsylvania</option>
        <option value="RI">Rhode Island</option>
        <option value="SC">South Carolina</option>
        <option value="SD">South Dakota</option>
        <option value="TN">Tennessee</option>
        <option value="TX">Texas</option>
        <option value="UT">Utah</option>
        <option value="VT">Vermont</option>
        <option value="VA">Virginia</option>
        <option value="WA">Washington</option>
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>

这里是没有json和的正常用法

我正在尝试代码如图所示工作，请帮助我。

Answer 1

您似乎有权更改 cc.json 输出？如果是这样，您可以将其格式化为输出类似

[{"code":"AL","name":"Alabama"}, ... ,{"code":"WY","name":"Wyoming"}]

然后您的 selectize 调用将类似于

$('#select-state').selectize({
  valueField: 'code',
  labelField: 'name',
  searchField: 'name',
  options: [],
  load: function(query, callback) {
    if (!query.length) return callback();
    $.ajax({
        url: 'http://localhost/maya/dist/cc.json',
        type: 'GET',
        dataType: 'json',
        data: {
            country: query,
        },
        error: function() {
            callback();
        },
        success: function(res) {
            callback(res);
        }
    });
  }
});

您无需使用 $.getJSON 手动添加选项