Question

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

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

任何评论，参考，提示，建议表示赞赏。

感谢。

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

SharePoint 2013 - 级联下拉字段

1 个答案: