0

最初に、次の方法で生成しdropdown menuました。

ドロップダウン メニューを作成する方法の詳細を追加しました。 

        <div class="well sidebar-nav">
            <img src="building.gif" style="display: block;margin-left:auto; margin-right:auto;max-width:100%; max-height:100%;" />
            <div class="dropdown" style="padding-left: 20px; padding-top:5px;">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="display: block;margin-left:auto; margin-right:auto;">
                    Select A Building
                    <span class=" caret">
                    </span>
                </button>

                <ul id="myul" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></ul>

            </div>
        </div>
    </div><!--/span2-->

さて、私は次のコードを書きました：

    var buildingList=[
          {
            "BuildingName": "Adler Journalism and Mass Communication Building",
            "BuildingNumber": "0456"
          },
          {
            "BuildingName": "Art Building",
            "BuildingNumber": "0021"
           } 
    ];

    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" style="display: block;margin-left:auto; margin-right:auto;">
                        Select A Building
                        <span class=" caret">
                        </span>
                    </button>
    <ul id="myul" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    </ul>

     <script type="text/javascript">
      var out = "";
      var ul = document.getElementById("myul");
      for (i = 0; i < buildingList.length; i++) {
                out = ' <li role="presentation"><a role="menuitem" tabindex="-1" href=" ' + buildingList[i].BuildingName + '  "> ' + buildingList[i].BuildingName + '   </a></li>';
                 var li = document.createElement("li");
                 var t = document.createTextNode(out);
                 li.appendChild(t);
                 ul.appendChild(li);
    }
    </script>

を使用して配列dropdownに基づいて動的にリストを生成したいのですが、助けてもらえますか?buildingListjavascript

前もって感謝します！

4

2 に答える 2

0

このようなものを試すことができます。

$.each(buildingList, function (index, value) {
    $(".dropdown-menu").append($("<li>").text(value.BuildingName));
})

あなたが見ることができるように、私はフィドルを作成しました。

https://jsfiddle.net/bcub7wsL/1/

プレーンなJavascriptを使用するようにフィドルを変更しました

http://jsfiddle.net/ha80r95b/

于 2015-03-02T05:41:15.370 に答える
-1

配列を分割し、要素をドロップダウン リストに追加できます。これが役立つと思います。

https://css-tricks.com/dynamic-dropdowns/

于 2015-03-02T04:54:09.343 に答える