【问题标题】:Adding options to select dynamically添加选项以动态选择
【发布时间】:2015-06-15 18:16:35
【问题描述】:

我已经使用 Ajax/JSON 从后端提取数据,我正在尝试使用 jQuery 将此数据附加到选择框。数据已正确附加到选择框,但仅当我输入alert("some text") 时才会显示在页面上。

代码如下:

var comp_select = jQuery("select[class='xf-depselect-selector depselect-fragment']").get(3);

alert("some text");

for (var i = 0; i < data.length; i++) {
   jQuery(comp_select).append(new Option(data[i]["component_name"], data[i]["component_name"]));
}

【问题讨论】:

    标签: jquery select dynamic xataface


    【解决方案1】:

    没有看到更多代码,这听起来像是一种竞争条件。将项目附加到 ajax 调用的成功回调中的代码,还是在调用 ajax 方法后调用的函数?通过“数据”的循环会建议回调,但我无法从那个 sn-p 中确定

    【讨论】:

    • jQuery.ajax({ url: "the_url.php" 成功: function(data){ var comp_select = jQuery("select[class='xf-depselect-selector depselect-fragment']") .get(3); alert("Ready Now"); for(var i=0;i', { value : data[ i]["component_name"] }).text(data[i]["component_name"])); } },完成:function() {},async:false,dataType:'json' });
    • 在成功回调的时候,是 DOM 中的第 4 个选择吗?是否可以提供要附加 ID 的选择以确保它添加到正确的选择中? get 函数是基于 0 的索引,因此如果您说它正在添加到页面但无法选择项目,则可能是它添加到了错误的选择中。顺便说一句,您可以通过将所有选项添加到数组并使用 .append 一次使用 arrayVar.join('') 一次性追加所有项目来提高追加效率,这样 DOM 只会被命中一次
    • 是的,它只是正确的 DOM 元素。它能够正确添加项目,但仅在编写警报()后才显示。而且,是的,我尝试将所有选项放入一个数组中。并一次全部附加到选择中。但没有工作。以下是剧院代码:var comp_select = jQuery("select[class='xf-depselect-selector depselect-fragment']").get(3); alert("Ready Now"); for(var i=0;i&lt;data.length;i++) { sellist += '&lt;option value="'+data[i]["component_name"]+'"&gt;'+data[i]["component_name"]+'&lt;/option&gt;'; } jQuery(comp_select).html(sellist);
    • 现在我可以访问台式机而不是移动设备,我能够创建一个模拟您的情况。我认为您的问题很可能是 .get(3) 获得第四次选择。我将其更改为 $(selector)[3] 然后出现选项。我敲了一个 JSFiddle 供参考:jsfiddle.net/chb3zb47
    • 不使用史蒂文,仍然是相同的行为。以及如何将我的代码放在此处的 cmets 框中。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多