• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 539
  • Last Modified:

Multi Select Option

I have a SharePoint jquery form that I use in a CEWP and one of the elements on the form is a Multi Selecion element, which is a drop down list that allows for multiple selections.  Ex:

<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>

The element needs to be pre-selected with data from a SharePoint list.  I have a column called cars and the data is comma dilimited (Saab,Audi).

So, using spservices and jquery, how do I pre-select the element with "Saab" and "Audi"?

Thanks for any help or insight you can provide.
0
Isaac
Asked:
Isaac
  • 2
1 Solution
 
Julian HansenCommented:
$(function() {
	$('select[name="cars"] option[value="saab"], select[name="cars"] option[value="audi"]').attr('selected', 'selected');
});

Open in new window

0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
That didn't work...Here it is in jsfiddle:

http://jsfiddle.net/rXGmc/
0
 
Julian HansenCommented:
Yes - it does work!

Your JSFiddle does not work because you did not do it right.

This is what you should have done.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('select[name="cars"] option[value="saab"], select[name="cars"] option[value="audi"]').attr('selected', 'selected');
});
</script>
<style type="text/css">
</style>
</head>
<body>
<select name="cars" multiple="multiple">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</body>
</html>

Open in new window


A link to a working version of the above code

Note you have to use the "cars" name for the select - not Audi or any other value.
You have to prefix all option selectors with the Select parent so as not to target all options on the page.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now