SharePoint 2013的查阅项功能，就是可以扩展其他列表字段为当前列表选项，但是选项太多的时候，会造成选择起来非常麻烦，所以，我们采取JS+Ajax的方式，改善一下这个展示，使操作更加方便。
展现效果
如下图，当我在Textbox里输入北京，会把北京开头的选项，加载到下拉选项中，如果什么都不输入，就是全部下拉选项，这样比较方便选项多的时候，进行筛选选择；
原理介绍
1、 使用JS隐藏原来的Select控件；
使用F12查看Select的Html代码，发现有Title是字段名，还有id属性，而option的value就是该item的id，所以，我们可以使用JS来操作这个select，如下图；
隐藏Select的JS脚本，就是获取所有的select控件对象，然后找到title相符合的，当然你也可以根据id来获取，id的格式应该是内部字段名称+列表GUID+字段类型标识，看你的习惯了，附JS脚本如下：
function HiddenField(strSelectTitle)
{
var selectObj = document.getElementsByTagName("select");
for(var i=0;i<selectObj.length;i++)
{
if(selectObj[i].title==strSelectTitle)
{
selectObj[i].style.display='none';
}
}
}
setTimeout("HiddenField('所在城市')",1)
2、 使用JS在原来Select位置下面，添加一个Text类型Input，输入文字；
这一步主要是在找到的select节点以后，使用parentNode找到父节点，然后在父节点的innerHTML里加入我们需要的Input，JS脚本附后：
if(selectObj[i].title==strSelectTitle)
{
selectObj[i].style.display='none';
var Par=selectObj[i].parentNode;
Par.innerHTML=Par.innerHTML + "<table width='135' style='background-color:white' border='0' cellspacing='0' cellpadding='0'><tr><td><table width='100%' bordercolor='#666666' border='0' cellspacing='0' cellpadding='0' style='border-collapse:collapse;cursor:default' onclick='showHide()'><tr><td align='center'><input type='text' name='C_Select' id='C_Select' onpropertychange='vChange()'></td></tr></table></td></tr><tr><td><div id='oOption' onselectstart='return false'></div></td></tr></table>";
}
3、 添加下拉菜单；
以下主要就是你JS脚本，放在页面上就可以，没有什么特别需要说明的地方。当然，我们可以在相关事件上，添加我们需要的代码段。
特别：这些脚本是百度上查到的，但是他也是转载，没有原文链接，所以没有附后；
<!--隐现层的函数-->
<script type="text/javascript">
function showHide(obj){
sh={block:"none",none:"block"}
//层的display属性值在"block"和"none"间不断轮换，
//达到轮换隐藏和显示的效果
oOption.runtimeStyle.display=sh[oOption.currentStyle.display]
}
</script>
<!--鼠标移上id为oOption的对象时执行本段代码-->
<script event="onmouseover" for="oOption">
obj=event.srcElement
//判断onmouseover事件是否发生在单元格上
if(obj.tagName=="TD"){
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#dedede"
//设置事件发生所在的单元格的字体颜色
obj.style.color="#FFFFFF"
}
</script>
<!--鼠标从id为oOption的对象上移开时执行本段代码-->
<script event="onmouseout" for="oOption">
obj=event.srcElement
//判断onmouseout事件是否发生在单元格上
if(obj.tagName=="TD"){
//设置事件发生所在的单元格的背景颜色
obj.style.backgroundColor="#FFFFFF"
//设置事件发生所在的单元格的字体颜色
obj.style.color="#000000"
}
</script>
查看本栏目更多精彩内容：http://www.bianceng.cnhttp://www.bianceng.cn/web/sharepoint/
<!--id为oOption的对象被单击时执行本段代码-->
<script event="onclick" for="oOption">
obj=event.srcElement
//判断onmouseover事件是否发生在单元格上
if(obj.tagName=="TD"){
showHide()//隐藏层
//设置id为oSelect的对象内的文本为被点击的单元格内的文本
document.getElementById("C_Select").innerText=obj.innerText
var selectObj=document.getElementsByTagName('SELECT');
for(var i=0;i<selectObj.length;i++)
{
if(selectObj[i].title=="所在城市")
{
var objvalue=obj.id.substring(8,obj.id.length);
selectObj[i].value=objvalue;
}
}
}
</script>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索颜色
， 事件
， 单元格点击事件
， obj
， 字段
， js获取背景颜色
， 隐藏select
， srcElement
， 单元
JS操作select
sharepoint查阅项、sharepoint功能介绍、sharepoint 搜索功能、sharepoint的功能、sharepoint 2016 功能，以便于您获取更多的相关知识。