SharePoint 2013 - 级联下拉字段

Question

我有一个包含 2 个下拉字段的 Sharepoint 2013 表单。我正在寻找一种方法来根据第一个下拉字段中的选择填充第二个下拉字段。

例如，表单将有一个州下拉字段，后跟一个城市下拉字段。城市下拉字段仅填充在州下拉字段中选择的州中找到的城市。

感谢任何 cmets、参考资料、提示和建议。

谢谢。

Answer 1

它在 webpart 中进行了级联下拉。我在我的 .ascx 中添加了以下代码。从列表中填充了两个下拉值。

代码如下。第一个下拉列表从状态列表中获取值并加载到 statesdl 中。在更改城市功能时，将使用过滤器从所选状态调用城市并加载。城市详细信息存储在城市列表中。 （我已经改变了我工作中使用的变量名，列表名。所以检查一次。但是这种代码格式是正确的）

<script type="text/javascript" language="javascript">
ExecuteOrDelayUntilScriptLoaded(statepopulate, "sp.js");

var _ctx = null;
    var _web = null;
    var _allstate = null;
    var _allstate1 = null;
    var _ctx1 = null;
    var _web1 = null;
    var state = null;
    var city = null;
	

function statepopulate() {
        //Get the list
        _ctx = SP.ClientContext.get_current();
        _web = _ctx.get_web();
        var list = _web.get_lists().getByTitle("State");
        //Create the query and get the results
        var query = new SP.CamlQuery();
        query.set_viewXml("<View><Query><OrderBy><FieldRef Name=\"Title\" /></OrderBy></Query></View>");
        _allcountry = list.getItems(query);
        _ctx.load(_allstate, 'Include(Title,ID)');
        _ctx.executeQueryAsync(Function.createDelegate(this, this.statepopulatesuccess), Function.createDelegate(this, this.statepopulatefailed));

    }
    function statepopulatesuccess() {
        //Clear out current entries
        var ddlstate = this.document.getElementById("ddlstate");
        ddlstate.options.length = 0;
        //Iterate through new entries and populate DDL
        var listEnumerator = _allcountry.getEnumerator();
        ddlcountry.options[ddlcountry.options.length] = new Option("Select state", 0);
        while (listEnumerator.moveNext()) {
            var currentItem = listEnumerator.get_current();
            ddlstate.options[ddlcountry.options.length] = new Option(currentItem.get_item("Title"), currentItem.get_item("ID"));

        }
    }

    function statepopulatefailed() {

    }


    function city() {
        _ctx1 = SP.ClientContext.get_current();
        _web1 = _ctx1.get_web();
        state = document.getElementById("ddlstate").value;
        var list1 = _web.get_lists().getByTitle("city");
        var query1 = new SP.CamlQuery();
        query1.set_viewXml('<Query><Where><Eq><FieldRef Name=\'ID\' /><Value Type=\'Counter\'>' + state + '</Value></Eq></Where></Query>');
        _allcity1 = list1.getItems(query1);
        _ctx1.load(_allpractice1, 'Include(state,ID,Title)');
        _ctx1.executeQueryAsync(Function.createDelegate(this, this.citypopulatesuccess), Function.createDelegate(this, this.citypopulatefailed));

    }


    function citypopulatesuccess() {
        var ddlcity = this.document.getElementById("ddlcity");
        ddlcity.options.length = 0;
        var listEnumerator = _allcity1.getEnumerator();
        while (listEnumerator.moveNext()) {
            var currentItem = listEnumerator.get_current();
            if (state == currentItem.get_item("ID")) {
                for (var i = 0; i < currentItem.get_item("state").length; i++) {
                    ddlcity.options[ddlcity.options.length] = new Option(currentItem.get_item("Title")[i], currentItem.get_item("ID")[i]);
                    
                }
            }
        }
    }

    function citypopulatefailed() {
        alert("failes");
    }


</script>

<td class="" align="left">
       
            State<sup class= "supspt">*</sup></td>
        <td class="style2" align="left">
        <div class="boxid1"><select id="ddlstate"  class="selectclass" onChange="city();"></select>
            
           </div></td>
    </tr>

 <tr>
        <td class="style3" align="left">
       
            City<sup class= "supspt">*</sup></td>
        <td class="style2" align="left">
        <div class="boxid1"><select id="ddlcity"  class="selectclass"><Option>Select City</option></select>
            
           </div></td>
    </tr>