0

这里发生了奇怪的情况。我正在使用 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");
      }

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

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

4

1 回答 1

0

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

这里的问题是一次附加一个选择被浏览器关闭。因此，这是执行此操作的最佳方法。

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 元素。

于 2013-09-12T13:36:19.277 回答