如何在列表框中獲取所選項目的索引，然后通過按鈕將其添加到列表框2中？

Question

我想在列表框中獲取所選項目的索引，以將所選項目添加到列表框2。

列表框是用HTML創建的。

<div class="clearfix">
<div class="select-container">
  <select name="sometext" size="5">

<?
 var sheet = SpreadsheetApp.getActiveSpreadsheet();
 SpreadsheetApp.setActiveSheet(sheet.getSheets()[1]);
 var lastRow = sheet.getLastRow();  
 var myRange = sheet.getRange("A1:A"+lastRow); 
 var data    = myRange.getValues();
?>

<? for (var i = 0; i < data.length; ++i) { ?>
 <option><?!= data[i] ?></option>
<? } ?>
    </select>
</div>
<div class="buttons">
  <div><button onclick='addMonitoredFolder()' id='button1'>Add</button></div>
</div>

因此，當我按下“添加”按鈕時，我希望將列表框1中當前選擇的項添加到列表框2中。如果用戶在列表中選擇了多個選項，那么它將添加這些或至少知道如何做會很好處理這個。 我在那里有函數addMonitoredFolder，因為我試圖弄清楚它只是無法理解。

<div class="select-container">
  <select name="sometext" size="5">
    <option>option</option>
  </select>
</div>

謝謝！

Answer 1

這是可以從列表中獲得多個選擇並將這些選擇轉移到第二個列表的代碼：

的index.html

<!DOCTYPE html>
<html>
  <body>
    <div>List Box One</div>

    <select id="slctOne" multiple>
      <option value="one">Value One</option>
      <option value="two">Value Two</option>
      <option value="three">Value Three</option>
      <option value="four">Value Four</option>
    </select>

    <div>List Box Two</div>

    <select id="slctTwo" multiple>
      <option value="one">Value One</option>
      <option value="two">Value Two</option>
      <option value="three">Value Three</option>
      <option value="four">Value Four</option>
    </select>

  <button onmouseup="getAndTransfer()">Get Choices</button>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

    <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
    <?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
  </body>
</html>

JavaScript.html

<script>
window.getAndTransfer = function() {
  var allChoices = getMultiple();
  putChoicesIntoSelectTwo(allChoices);
};


window.getMultiple = function() {
  //console.log('getMultiple ran')
  var allOptionNodesSelected = document.getElementById('slctOne').querySelectorAll('option:checked');
  var howManySelected = allOptionNodesSelected.length;

  console.log('number of option nodes: ' + howManySelected);
  var optionElmt1 = allOptionNodesSelected[0];
  console.log('optionElmt1.selected: ' + optionElmt1.selected);

  var i=0,
      arryAllOptions = [];

  for(i=0;i<howManySelected;i+=1) {
    console.log('optionElmt1.selected: ' + allOptionNodesSelected[i].value);
    arryAllOptions.push(allOptionNodesSelected[i].value);
  };

  return arryAllOptions;
};

window.putChoicesIntoSelectTwo = function(theChoices) {
  //Get select list two element
  var selectListTwo = document.getElementById('slctTwo');

  var allOptions = selectListTwo.getElementsByTagName("option"); //Get all current options inside of this select tag
  var i = 0, thisOptionVal="";
  //console.log(allOptions.length);

  for (i=0;i<allOptions.length;i+=1) {
    thisOptionVal = allOptions[i].value;
    if (theChoices.indexOf(thisOptionVal) !== -1) {
      allOptions[i].selected = true;
    } else {
      allOptions[i].selected = false;
    };
  }; 
};
</script>

如何在列表框中獲取所選項目的索引，然后通過按鈕將其添加到列表框2中？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-09-26 18:14:14

的index.html

JavaScript.html

如何在列表框中獲取所選項目的索引，然后通過按鈕將其添加到列表框2中？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-09-26 18:14:14

的index.html

JavaScript.html

解決方案1
0 已采納 2015-09-26 18:14:14