Javascript:如何基于对象创建窗口/下拉菜单?

时间:2017-10-09 09:00:42

标签: javascript jquery html css sharepoint

情况:我有一个Sharepoint列表。我有一个充满了少量字符串元素的对象。这个函数应该触发时有一个事件。

我想要的是什么:我想创建一个窗口或下拉菜单,或者用户可以点击元素以选择其中一个。

问题:我无法直接编辑HTML(自动生成Sharepoint),所以我可以在脚本编辑器中添加一些脚本。任何创建用户可以从对象中选择的菜单的选项都可以。 (可能创建一个新窗口并禁用在打开它时点击网站的其他部分将是最简单的方法,但我不确定)。

我可以请你们给我看一个如何创建它的例子吗?

//some code to generate the window/dropdown/ect here
    function getData(info) //info is the object
        {
          for (var i = 0; i < info.length; i++)
          {
          //I should add the object elements to the window/dropdown/ect here
          }
        }

1 个答案:

答案 0 :(得分:1)

首先选择要在HTML中创建下拉列表的位置。例如,假设您有一个div,您想要添加它...

<div id="yourplace">
</div>

...首先,您必须使用select创建id元素。之后,您可以遍历info对象,为每个值创建option元素并将其添加到创建的元素中。

在这种情况下,您无法使用for,因为您正在使用对象,但您可以使用jquery $.each()函数,因此您可以执行此类操作。 ..

var myInfo = { 0: "test1",
               1: "test2",
               2: "test3",
               3: "test4",
               4: "test5" }; 

$('div#yourplace').append('<select id="infodropdown"></select>');

function getData(info) {

    var myOptions = [];
    $.each(info,function(index,value) {
        myOptions.push('<option value="'+value+'">'+value+'</option>');
    });

    $('select#infodropdown').html(myOptions);
}

getData(myInfo);

这里有一个测试小提琴... https://fiddle.jshell.net/rigobauer/16ot7w0b/

我希望它有所帮助