Question

这里发生了奇怪的情况。我正在使用jquery插件selected.js。我正在使用ajax调用和jquery更新页面上已有的下拉列表。这里有一些示例代码。这是我的下拉菜单，如页面所示。

<div id="singleDropDownBlock" style="display: none">

    <select id="SingleDropDown"  class="chzn-select" data-placeholder="Choose your start Location" onchange="GetFromNodeValue();">
        <!--<option>select a strating locnation based on category.</option>-->

    </select>

</div>

这是使用jquery将值加载到下拉列表中的代码。

     function GetResultsFromMultiCategory(data)
     {


             for (i = 0; i < data.d.categories.length; i++)
             {
                 //console.log(data.d.categories[i].catNode);

                 if (data.d.categories[i].catNode == "0")
                 {

                     $('#SingleDropDown').append("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
                     console.log("<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">");
                     //onOrOff = false;  </optgroup>
                 }
                 else
                 {
                     $('#SingleDropDown').append("<option " + "value=" + data.d.categories[i].catNode+ ">" + data.d.categories[i].catLoc + "</option>");
                     console.log("<option " + "value='" + data.d.categories[i].catNode + "'>" + data.d.categories[i].catLoc + "</option>");

                     if (typeof(data.d.categories[i + 1]) != "undefined")
                     {

                         if (data.d.categories[i + 1].catNode == "0")
                         {
                             $('#SingleDropDown').append("</optgroup>");
                             console.log("</optgroup>");

                         }//end second if
                     }//end first if
                 }//end else

             }

             $('#SingleDropDown').append("</optgroup>");
             console.log("</optgroup>");
             $("#SingleDropDown").chosen({ placeholder_text_single: "Choose Map" });
             $("#SingleDropDown").trigger("chosen:updated");
      }

由于某些原因选择不使用更新，它只会使用进行更新。有什么我想念的吗？有人可以指出我正确的方向。我也无法选择更新占位符。我得到的只是列表中的第一项作为显示。

提前感谢您提供的任何帮助。

Answer 1

我终于弄明白了我的问题。我会在这里发布答案，以便有一天它可以帮助别人。

这里的问题是浏览器正在关闭一次添加一个选择。因此，这是最好的方法。

function GetResultsFromMultiCategory(data)
         {
             $("#singleDropDownBlock").show();

             $('#SingleDropDown').append("<option></option>");

             var myOptions = '';
             for (i = 0; i < data.d.categories.length; i++)
             {    
                 if (data.d.categories[i].catNode == "0")
                 {
                     myOptions += "<optgroup " + "label= " + '"' + data.d.categories[i].catName + '"' + ">";
                 }
                 else
                 {
                     myOptions += "<option " + "value=" + data.d.categories[i].catNode + ">" + data.d.categories[i].catLoc + "</option>";

                     if (typeof(data.d.categories[i + 1]) != "undefined")
                     {
                         if (data.d.categories[i + 1].catNode == "0")
                         {
                             myOptions += "</optgroup>";
                         }
                     }
                 }    
             }
             myOptions += "</optgroup>";
             $('#SingleDropDown').append(myOptions);
             $("#SingleDropDown").chosen({placeholder_text_single: "Choose Start Location" });
         }

这里带走的是当使用append而不是追加每一行时，构建字符串然后将其附加到html元素。

选择不使用<optgroup> </optgroup>更新的jquery插件

1 个答案: