填充多选下拉列表

时间:2013-06-29 22:25:57

标签: javascript jquery sharepoint

我有一个我在CEWP中使用的SharePoint jquery表单,表单上的一个元素是Multi Selecion元素,这是一个允许多个选择的下拉列表。例如:

 <select name="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
 </select>

需要使用SharePoint列表中的数据预先选择元素。我有一个叫做汽车的专栏,数据是逗号稀释的(例如:萨博,奥迪)。

因此,使用spservices和jquery,如何使用“Saab”和“Audi”预先选择元素? 这是我在jsFiddle中的内容:    http://jsfiddle.net/rXGmc/ 然后我需要将它应用于sharepoint。 感谢您提供的任何帮助或见解。

2 个答案:

答案 0 :(得分:1)

所以,如果我做得好,对于萨博来说,奥迪的输出应该是这样的:

<select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab" selected="selected">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi" selected="selected">Audi</option>
</select>

这不能在服务器端完成吗?

如果你想在客户端做这件事,我不确定SharePoint返回什么类型的数据,假设“Saab,Audi”是一个字符串,你可以在JavaScript中做这样的事情:

<script>
str = "Saab,Audi";
sel = str.split(",");
// Note I have added id="cars" in the HTML
options = document.getElementById("cars").getElementsByTagName("option");
for(var i in options)
    for(var j in sel)
        if(options[i].innerHTML == sel[j])
            options[i].selected="selected";
</script>

答案 1 :(得分:1)

你的小提琴不起作用,因为你没有包含jQuery(在左边的Frameworks&amp; Extensions选项中)并且因为你的选择器有一些问题:

'select[name="cars"] option[value="saab"], select[name="Volvo"] option[value="audi"],option[value="benz"],'
//                              incorrect name here ----^^^^^       and a trailing comma ----------------^

选择器的第一部分:

select[name="cars"] option[value="saab"]

...实际上会选择“saab”选项,但接下来是第二部分:

, select[name="Volvo"] option[value="audi"]

...正在尝试选择一个选项元素,该元素是name="Volvo"的select元素的子元素,并且没有具有该名称的select。然后是第三部分:

, option[value="benz"],

...正在尝试选择带有“benz”的选项,无论它属于哪个选择元素。

但整个选择器不起作用,因为它有一个尾随逗号。

所以解决这些问题,它将适用于“saab”和“audi”:

'select[name="cars"] option[value="saab"], select[name="cars"]  option[value="audi"]'

演示:http://jsfiddle.net/rXGmc/2/

说了这么多,更简洁的选择是使用.find().children()

$('select[name="cars"]').children('[value="saab"],[value="audi"]')
                        .attr('selected', 'selected');

演示:http://jsfiddle.net/rXGmc/4/