Question

我有一个电子表格文件，其中包含一些侧栏以输入数据并执行其他操作。

在侧边栏中，我有一个输入数据的表单，并且数据与3个选择列表一起定义仓库中金属单元的位置。该职位包括3个信息：级别，字母和数字。等级可以是N1，N2或N3，字母可以是A1，A2，B1，B2直到M2，数字可以是1到66。从视觉上讲，就像这样：

<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
<p>Position:</p>
<select>
  <option selected disabled>Level</option>
  <option>N1</option>
  <option>N2</option>
  <option>N3</option>
</select>
<select>
  <option selected disabled>Letter</option>
  <option>A1</option>
  <option>A2</option>
  <option>B1</option>
  <option>B2</option>
  <option>C1</option>
  <option>C2</option>
  <option>...</option>
</select>
<select>
  <option selected disabled>Number</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>...</option>
</select>

问题是，每个级别都有一些自己的细节，例如：

对于等级N1，存在所有字母和数字。
对于N2级，所有字母都存在，但数字只有33到66。
对于等级N3，仅存在F1，F2，G1和G2字母以及44至50个数字。

因此，理想的形式将根据我选择的第一个选项改变后两个选择的内容。问题是，GAS仅限于操纵这些元素，我找不到真正有效的方法，因为内容应根据Level selected选项动态变化。

Answer 1

您可以使用jQuery / javascript和DOM属性和方法更改选择字段中的HTML。 GAS不受限制。你做不到的事情很少。

您需要使用onchange()事件在选择上一个字段时填充其他选择字段：

<!-- the onchange attribute make the function run when a choice is made -->
<select id="idLevels" onchange="fncPopulateLetterSelect()">
  <option selected disabled>Level</option>
  <option>N1</option>
  <option>N2</option>
</select>

<select id="idLtrOptions">
  <option selected disabled>Letter</option>
  <option>A1</option>
  <option>A2</option>
  <option>B1</option>
  <option>...</option>
</select>

<script>
  //This is an anonymous function assigned to the browsers window object.
  window.fncPopulateLetterSelect = function() {
    /* Create an object with a specific list of values associated with
     * that particular choice. Values inside brackets are elements in 
     * an array */
    var objValOneToLetterChoices = {"N1":["P3","G9","y23"]};
    var selectOneValue = document.getElementById("idLevels").value;
    alert('It ran!');
    console.log('selectOneValue: ' + selectOneValue);

    //Get the list of choices that is in the array.
    var arrayOfNewOptions = objValOneToLetterChoices[selectOneValue];
    console.log('arrayOfNewOptions: ' + arrayOfNewOptions);

    //define multiple variables at once for the loop
    var i=0, newOptions = "", thisOption="";

    /*Loop through all the elements of the array, and create HTML to
     * inject into the select tag */
    for (i=0;i<arrayOfNewOptions.length;i+=1) {
      thisOption=arrayOfNewOptions[i];
      console.log("thisOption: " + thisOption);
      //On every loop concatenate the new option to the previous options
      newOptions += "<option>" + thisOption + "</option>"
    };
    /*Get a reference to the HTML Select element that will receive the
     * new list of options */
    var elmtLtrOptions = document.getElementById("idLtrOptions");
    //Use the DOM innerHTML property to set the new HTML
    elmtLtrOptions.innerHTML = newOptions;
  };
</script>

innerHTML

要根据第二个选择框选择要更改的第三个选择框，只需使用相同的代码结构，但不同的HTML元素ID，当然还有对象数组中的不同设置。

如何使用Google Apps脚本操作选择列表？

1 个答案: