我有两个选择下拉菜单,第一个从共享点列表中获取项目,当我单击移动按钮时,所选项目移到第二个下拉列表中,当我单击共享点列表的保存按钮时,状态会动态更改。在第一个下拉菜单状态为“活动”。如果该项目位于第二个下拉菜单中,则项目状态为“无效”。请告诉我该怎么做??
我只执行.soo这段代码,请告诉我我该怎么办?
$(document).ready(function(){
ExecuteOrDelayUntilScriptLoaded(retrieveListItems,'sp.js');
});
var ItemContainer = { ItemList: [] };
function retrieveListItems() {
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('States');
var camlQuery = new SP.CamlQuery();
// camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
this.collListItem = oList.getItems(camlQuery);
clientContext.load(collListItem);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onListDataLoadQuerySucceeded),
Function.createDelegate(this, this.onListDataLoadQueryFailed));
}
function onListDataLoadQuerySucceeded(sender, args) {
var listItemInfo = '';
var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var tempItem = { ID: oListItem.get_id(), Value:
oListItem.get_item('Title') };
ItemContainer.ItemList.push(tempItem);
}
fillDropDown();
}
function onListDataLoadQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' +
args.get_stackTrace());
}
function fillDropDown() {
var ddlCategory = document.getElementById('sct1');
if (ddlCategory != null) {
for (var i = 0; i < ItemContainer.ItemList.length; i++) {
var theOption = new Option;
theOption.value = ItemContainer.ItemList[i].ID;
theOption.text = ItemContainer.ItemList[i].Value;
ddlCategory.options[i] = theOption;
}
}
}
//for button function
$(function(){function moveitems(origin,dest){
$(origin).find(':selected').appendTo(dest);
}
$("#move").click(function(){
moveitems('#sct1','#sct2');
});
});
答案 0 :(得分:0)
该要求似乎与我测试过的this one差不多,您可以检查我的测试解决方案。
<select id='selectItems' multiple='multiple'></select>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/SiteAssets/MultiSelectjQLib/multi-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="/SiteAssets/MultiSelectjQLib/jquery.multi-select.js"></script>
<script type="text/javascript">
ExecuteOrDelayUntilScriptLoaded(custom, "sp.js");
function custom() {
var clientContext = new SP.ClientContext.get_current();
//update list as your list
var list = clientContext.get_web().get_lists().getByTitle("MultiSelectTest");
//get the first item only, you may update the logic per you requirement
var items = list.getItems(SP.CamlQuery.createAllItemsQuery());
clientContext.load(items);
clientContext.executeQueryAsync(
function () {
var listItemEnumerator = items.getEnumerator();
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var _Title = oListItem.get_item('Title');
var _Status = oListItem.get_item('Status');
var _ID = oListItem.get_item('ID');
if (_Status) {
$('#selectItems').append($("<option></option>").attr("value", _ID).text(_Title));
} else {
$('#selectItems').append($("<option selected></option>").attr("value", _ID).text(_Title));
}
}
$('#selectItems').multiSelect({
afterSelect: function (values) {
alert("Select value: " + values);
var oListItem = list.getItemById(values);
oListItem.set_item('Status', false);
oListItem.update();
clientContext.executeQueryAsync(
function () {
alert('update complete');
},
function (sender, args) {
console.log(args);
}
);
},
afterDeselect: function (values) {
alert("Deselect value: " + values);
var oListItem = list.getItemById(values);
oListItem.set_item('Status', true);
oListItem.update();
clientContext.executeQueryAsync(
function () {
alert('update complete');
},
function (sender, args) {
console.log(args);
}
);
}
})
},
function (sender, args) {
console.log(args);
})
}
</script>