HtmlService表单-动态下拉列表

HtmlService Form - Dynamic DropdownList

本文关键字：下拉列表 动态 表单 HtmlService      更新时间：2023-09-26

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

表单中有多个dropdownlist。

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

您想要的东西可以在网页上用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>

相关文章：