<option> 不附加在 jquery 中的 <select> 中答案

【问题标题】：<option> not append in <select> in jquery<option> 不附加在 jquery 中的 <select> 中
【发布时间】：2012-01-23 10:21:18
【问题描述】：

我尝试通过解析来自 XMl 的数据，使用 javascript 将 <option> 附加到 <select> 中。从 xml 正确解析的数据，但它没有附加在 <select> 中。

我还想将选项显示为（图像+文本）格式。如何做到这一点......

我的 HTML 代码：

<form style="margin:20px 0">
    <p>
        <select id='mySelect' multiple="multiple" style="width:370px">
        </select>
    </p>

</form>

Javascript 代码：

$(document).ready(function(){

    $.ajax({
        type: "GET",
        url: "newpersonal1.xml",
        dataType: "xml",
        success: function(xml) {
            var select = $('#mySelect');
            $(xml).find('value').each(function(){
                 var title = $(this).find('name').text();
                 alert(title);
                 select.append("<option value='"+title+"'>"+title+"</option>");         
            });                 
        }
    });
});

如何解决此问题并在选择 <option> 中添加图像。

【问题讨论】：

据我所知，<option> 元素中不能包含图像。您可以使用 CSS 设置背景图像，但它不适用于所有浏览器。或者您可以使用嵌套的<div> 元素或<ul> 或其他东西来模拟<select> 元素。
请显示您的标题字符串是什么样的。

标签： javascript jquery jquery-ui

【解决方案1】：

下面的代码对我有用。

$(function(){
   $.ajax({
    type: "GET",
    url: "newpersonal1.xml",
    dataType: "xml",
    success: function(xml) {
        var select = $('#mySelect');
        var options = '';
        $(xml).find('value').each(function(){
             var title = $(this).find('name').text();
             options += "<option value='" + title + "'>" + title + "</option>";                         
        });             
        select.html(options);
        $("#mySelect").multiselect().multiselectfilter();
    }
  });   
});

我注意到，当 html 从本地文件夹运行时，xml 文件不会在 chrome 中加载。但它确实可以在服务器上运行。

如果有帮助，请标记为答案。干杯

【讨论】：

使用普通选择框时可以正常工作。我尝试过使用来自erichynds.com/examples/jquery-ui-multiselect-widget/demos/… 的过滤器和多选插件。如果我使用这些，选项不附加...我不知道原因...在过滤器插件示例中仅通过静态数据。我尝试了动态数据...。
在ajax调用成功后将调用多选插件的代码移到下拉列表中。像这样：在我之前的回答中，在这行代码之后：select.html(options);添加以下代码行： $("#mySelect").multiselect().multiselectfilter();如果有帮助，标记为答案。我已修改我的答案以包含此编辑。

【解决方案2】：

当您以自己的方式处理“过滤器和多选插件”时，您必须采取额外的步骤。

它模仿选择对象，隐藏原始对象并创建一组按钮和跨度元素。它仅在初始化时使用原始的。

因此，您必须在使用附加选项更新原始选择标签后立即调用函数 refresh()。

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#refresh

【讨论】：

【解决方案3】：

您的title 字符串有可能格式错误，需要转义。

除非您绝对确定这些值不能包含任何特殊字符，否则连接字符串并不是创建元素的好方法。因此，更好的方法是：

$('<option>', { val: title, text: title }).appendTo(select);

我注意到，如果所需的值与选项中包含的文本相同，则实际上不需要在 <option> 标记中指定值。

【讨论】：

它也不起作用...实际上我已经尝试过来自erichynds.com/examples/jquery-ui-multiselect-widget/demos/… 的过滤器插件。在那个具有静态数据的

【解决方案4】：

试试这个可能对你有帮助，

   var selectList = "", title = ""; 
   $(xml).find('value').each(function(){ 
    title = $(this).find('name').text(); 
    selectList += "<option value='" + title + "'>" + title + "</option>";
   });
   $('#mySelect').html(selectList);

这个代码在我的情况下是有效的，不知道你....

【讨论】：