javascript - HtmlService 表单 - 动态下拉列表

Question

我有一个 HtmlService 表单，可以从用户那里获取数据。

表单中有多个dropdownlist。

如果用户已经在第一个dropdownlist中选择了某个选项，是否可以从后续dropdownlist中删除该选项？ google.script.run 能够做到这一点吗？

Answer 1

您要查找的内容可以直接在网页上使用 JavaScript 完成，无需使用 google.script.run 向服务器进行任何回调。下面是一个 JSfiddle 示例，您可以在其中单击下拉列表并使用 JQuery 显示站点的新部分:https://jsfiddle.net/rorfw6mb/1/

这应该向您展示一种基本方法，您可以根据用户的选择在页面上显示不同的元素。

var optionsTemplates = { 
  'Option 1': '<span>Option 1 selected</span>',
  'Option 2': '<span>Option 2 selected</span>',
  'Option 3': '<span>Option 3 selected</span>',
  'Option 4': '<span>Option 4 selected</span>'
};

$('select').on('change', function(){
  let value = $(this).val();
  console.log(value);
  if(value !== ''){
    $('#option-container').removeClass('hidden');
    $('#option-container').html(optionsTemplates[value]);
  } else {
  	$('#option-container').addClass('hidden');
  }
})

#option-container.hidden {
  display: none;
}

#option-container {
  margin: 5px;
  border: 2px solid blue;
  width: auto;
  display:inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value="Option 1">Option 1</option>
  <option value="Option 2">Option 2</option>
  <option value="Option 3">Option 3</option>
  <option value="Option 4">Option 4</option>
</select>

<div id="option-container" class="hidden">
  
</div>