Question

我的列表框（MySelectLinks）从存储在sharepoint list列中的javascript对象数组中获取值（AllLinks）。我的列表框显示AllLinks的值：

[{"AllLinks":"abc","Order":7},{"AllLinks":"ghj","Order":9},{"AllLinks":"abcb","Order":4},{"AllLinks":"ghjnn","Order":1}]

我想通过上下移动元素来更改顺序，并将新订单保存在数组中。因此新订单可以保存在列表中。以下代码更改了顺序，但不能保留值：

function MoveUp(lst){
if(lst.selectedIndex == -1)
alert('Please select an Item to move up.');
else
{
if(lst.selectedIndex == 0)
{
    alert('First element cannot be moved up');
    return false
}
else
{
    var tempValue = lst.options[lst.selectedIndex].value;
    var tempIndex = lst.selectedIndex-1;
    lst.options[lst.selectedIndex].value = lst.options[lst.selectedIndex-1].value;
    lst.options[lst.selectedIndex-1].value = tempValue;
    var tempText = lst.options[lst.selectedIndex].text;
    lst.options[lst.selectedIndex].text = lst.options[lst.selectedIndex-1].text;
    lst.options[lst.selectedIndex-1].text = tempText;
    lst.selectedIndex = tempIndex;

}} return false;}

在列表框中显示值的代码：

function populateMyLinks()
{

$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data)
 {

 var blah = JSON.parse(data.d.results[0].AllLinks);
  blah = sortJSON(blah, 'Order');   
 $.each(blah,function(i,result)
 {
   option2 += "<option value='" + result.AllLinks+"'>"+result.AllLinks+"</option>"
 })
 $("#MySelectLinks").append(option2);
 },
  error: function (data)
 {
  alert(data.responseJSON.error);
  }
      });
  }

Answer 1

我没有时间为代码添加一些注释，但我希望它能解释自己。我希望它能满足你的期望。

＆＃13;

/* === ELEMENT MANIPULATION === */
function moveOptionDown(selectElement) {
  const
    optionElement = selectElement.options[selectElement.selectedIndex],
    nextOption = selectElement.options[selectElement.selectedIndex + 1];
    
  nextOption.insertAdjacentElement('afterend', optionElement);
}

function moveOptionUp(selectElement) {
  const
    optionElement = selectElement.options[selectElement.selectedIndex],
    previousOption = selectElement.options[selectElement.selectedIndex - 1];
    
  selectElement.insertBefore(optionElement, previousOption);
}
/* === ELEMENT MANIPULATION === */



/* === ARRAY METHODS === */
function generateOptionArray(selectElement) {
  const
    options = selectElement.options,
    result = [];
  for (var index=0; index < options.length; index++) {
      result.push({
        AllLinks: options[index].textContent,
        Order: index
      });
  }
  
  return result;
}
/* === ARRAY METHODS === */




/* === EVENT HANDLERS === */
function onMoveOptionUp(event) {
  const 
    selectElement = document.getElementById('mySelect');
    
  if (
    selectElement.selectedIndex <= 0
  ) {
    console.log('No option, or the first option, is selected. There is nothing to move');
    return;
  }
  
  moveOptionUp(selectElement);
  const
    optionsArray = generateOptionArray(selectElement);
  console.log(optionsArray);
}

function onMoveOptionDown(event) {
  const 
    selectElement = document.getElementById('mySelect');
    
  if (
    selectElement.selectedIndex === -1 ||
    selectElement.selectedIndex >= (selectElement.options.length - 1)
  ) {
    console.log('No option, or the last option, is selected. There is nothing to move');
    return;
  }
  
  moveOptionDown(selectElement);
  const
    optionsArray = generateOptionArray(selectElement);
  console.log(optionsArray);
}
/* === EVENT HANDLERS === */

const
  buttonUp = document.getElementById('move-up'),
  buttonDown = document.getElementById('move-down');
  
buttonUp.addEventListener('click', onMoveOptionUp);
buttonDown.addEventListener('click', onMoveOptionDown);

＆＃13;

<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
</select>

<button type="button" id="move-up">move selected element up</button>

<button type="button" id="move-down">move selected element down</button>

＆＃13;

如何更改列表框中元素的顺序，并使用javascript将listbox的值存储到数组中

1 个答案: