Below Post show the full example
of the script I use to set the default value of a Lookup field based on an ID
stored in the querystring. setting a Lookup field is a bit more complicated
than some other field types. The reason is that Lookup FormFields are rendered
with different HTML when the target list contains more than 20 items.
Here’s a partial table of
SharePoint column types and their corresponding “identifiers” and “tagNames”:
|
SharePoint Field Type
|
identifier
|
tagName
|
|
Single Line of Text
|
TextField
|
input
|
|
Multiple Lines of Text
|
TextField
|
input
|
|
Number
|
TextField
|
input
|
|
Currency
|
TextField
|
input
|
|
Choice (dropdown)
|
DropDownChoice
|
select
|
|
Lookup (single)*
|
Lookup
|
select
|
|
Lookup (multiple)
|
SelectCandidate; SelectResult
|
select
|
|
Yes/No
|
BooleanField
|
input
|
SharePoint Lookup type can allow user to pick up the items from existing
List, when editing the item it will show as a dropdown box (<SELECT>
Element in HTML ). Sometimes we may want to fire the onchange
event when the selected item changed. This
is easy by using JavaScript to bind the onchange event to the control. First we
find out the Element by <SELECT> tag and then bind the onchange to it.
Open
SharePoint Designer and add above script to the page.
There is
another way to add the script to the page without using SPD, go to the Edit
page, on the Browser URL address bar, append ‘&toolpaneview=2’ at the
end of the url and hit Enter.it will go to web part page design UI. So just add
a ‘Content Editor WebPart’, click ‘Soruce Editor’ and paste above script into
it.
<script
type="text/javascript">
_spBodyOnLoadFunctionNames.push("PageOnLoad");
function PageOnLoad() {
//find
your lookupElement from the page.
var lookupElement = GetLookupField(’Lookup Field’);
//because
browser render Lookup field diferrent when items number below or more than 20.
//so we bind diffrent event to the Lookup.
if (lookupElement.length < 20)
lookupElement.onchange = function() {
OnChanged () };
else //for more than 20 items
lookupElement.onblur = function() {
OnChanged () };
}
function
OnChanged(){
alert("Value got Changed");
}
//this
function is used to get Lookup dropdown element.
function
GetLookupField(elementTitle) {
//first we try to see if it’s being
rendered as <select> tag. for items less then 20
var lookupElement =
GetElementByTypeAndTitle('SELECT', elementTitle);
//if more than 20 items, it will be render
as <input>
if (lookupElement == null)
lookupElement =
GetElementByTypeAndTitle('INPUT', elementTitle);
return lookupElement;
}
function
GetElementByTypeAndTitle(elementType, elementTitle) {
//get the Element by tag name.
var allElements =
document.getElementsByTagName(elementType);
for (var i = 0; i < allElements.length;
i++) {
//compare the Title.
if (allElements [i].title ==
elementTitle)
return allElements [i];
}
return null;
}
</script>
The above script should
now be able to handle select change no matter items number < 20 or not.
