在Googlesheet中是否可以有一个多select列表框？

Question

是否可以使用应用程序脚本在 google sheet 上添加多个 select 列表框？

我找到了一种可以通过 multi dropdown 部分实现的方法，但用户需要 select 并等待几秒钟才能 select 另一个。还有一个问题，您可能最终 selecting 多次同名；有一个复选框会更有效率。

在 google sheet 下方，POC1 是我希望有列表框的列，它允许在名称列表中 select 多个名称并在同一列中显示单元格，按分隔符分隔。

在 POC1 列单元格中有类似下面的东西会很棒，但这是使用 excel，想知道如何在我们使用的 Google Sheet 上复制工作中的 Gsuite。

Answer 1

使用应用程序脚本：

这是一种使用应用程序脚本和自定义菜单的方法

1.) 转到 扩展 -> Apps 脚本。将 Code.gs 重命名为 SERVER.gs。现在复制并粘贴下面的代码以替换里面的所有内容

/**
 * Changes the variable validation if needed
 */

var validation = {
    sheet: 'VALIDATION',
    range: 'A2:A'
}

/**
 * Creates a menu entry in the Google Docs UI when the document is opened.
 *
 * @param {object} e The event parameter for a simple onOpen trigger. To
 *     determine which authorization mode (ScriptApp.AuthMode) the trigger is
 *     running in, inspect e.authMode.
 */
function onOpen(e) {
    SpreadsheetApp.getUi().createMenu('Sidebar')
        .addItem('Show Sidebar', 'showSidebar')
        .addToUi();
        showSidebar();
}


/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */

function showSidebar() {
    SpreadsheetApp.getUi()
        .showSidebar(HtmlService.createTemplateFromFile('SIDEBAR')
            .evaluate()
            .setSandboxMode(HtmlService.SandboxMode.IFRAME)
            .setTitle('Multiple selector'));
}

function getOptions() {
    return SpreadsheetApp.getActive().getSheetByName(validation.sheet).getRange(validation.range).getDisplayValues()
        .filter(String)
        .reduce(function(a, b) {
            return a.concat(b)
        })
}

function process(arr) {
    arr.length > 0 ? SpreadsheetApp.getActiveRange().clearContent().setValue(arr.join(", ")) :
        SpreadsheetApp.getUi().alert('No options selected')
}

2.) 在脚本编辑器中单击加号 (+) 创建一个新文件，然后单击 HTML。将其命名为 SIDEBAR.html.

3.)用下面的代码替换内容：

<!DOCTYPE html>
<html>
<style>
    .container,
    .buttons {
        margin: 5px;
        width: 95%;
        padding: 2px;
        font-size: 13px;
    }
</style>

<head>
    <base target="_top">
    <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
</head>

<body>
    <div class="container"></div>
    <div class="buttons">
        <p>
            <button class="action" id="action">Fill active cell</button>
            <button id="btn">Rebuild options</button>
        </p>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
    <script>
        $(document).ready(function() {
            createList();
            var selected = [];
            $('.ui.checkbox').checkbox();
            $("#action").click(function() {
                $("input:checkbox[name=sel]:checked").each(function() {
                    selected.push($(this).val());
                    $(this).prop( "checked", false ); 
                });
                google.script.run.process(selected)
                selected.length = 0;
            });
            $("#btn").click(function() {
                createList();
            });
        });

        function options(arr) {
            $(".container").empty();
            $(arr).each(function(i, el) {
                $(".container").append('<div class="field"><div class="ui checkbox"><input type="checkbox" name="sel" value="' + el + '"><label>' + el + '</label></div></div>')
            });
        }

        function createList() {
            google.script.run.withSuccessHandler(options).getOptions()
        }
    </script>
</body>

</html>

4.)刷新你的传播sheet你现在应该有自定义菜单侧边栏。

5.) 添加一个名为“Validation”的 sheet，您可以在此处放置 select 可用的选项。从第 2 行开始。

6.) 单击边栏> 显示边栏。侧边栏应在右侧打开，其中包含您在验证中添加的选项列表 sheet。

7.) Select 您要输入 selected 选项的单元格。您现在可以从选项中 select 多项。

参考文献：

https://www.youtube.com/watch?v=Gsnzgvvx2y8 , 选项 1
Multiple items from dropdown
这是一个示例 sheet，您可以从中获取应用程序脚本代码：https://docs.google.com/spreadsheets/d/1cam1LNJgvWVDx_gmEVmPzuTYaITmsQWhZ7tlcHwAmCY/copy

Answer 2

假设您的数据位于命名区域中 'items'

var items = SpreadsheetApp.getActiveSpreadsheet().getRange('items').getValues().flat()

按脚本如下

function inputMultipleCheckBoxesSidebar() {
  var page = `<!DOCTYPE html><html><head></head><body><form><table>`
  items.forEach(c => page += `<tr><td><input type="checkbox" name="xxx" value="${c}"></td><td>${c}</td></tr>`)
  page += `</table></form><br>
<input type="button" value="Submit" class="action" onclick="form_data()" >
<input type="button" value="Reset" onclick="document.forms[0].reset()" />
  <script>
      function form_data(){
        var checkedValues = []; 
        var inputElements = document.getElementsByName('xxx');
        for(var i=0; inputElements[i]; ++i){
          if(inputElements[i].checked){
            checkedValues.push(inputElements[i].value);
          }
        }
        google.script.run.withSuccessHandler().getCheckedValues(checkedValues);
      };
</script></body></html>`
  var html = HtmlService.createHtmlOutput(page).setTitle("Your title ...")
  SpreadsheetApp.getUi().showSidebar(html);
}

然后以数组的形式取回值

function getCheckedValues(valeur) {
  Browser.msgBox(valeur)
  // do something
}

在Googlesheet中是否可以有一个多select列表框？

Is it possible to have a multi select list box in Google sheet?

google-apps-script

google-sheets

使用应用程序脚本：