javascript - 有什么方法可以编辑for循环吗？

Question

设置:

我有两个选择元素和一个按钮。

第一个选择元素 (id="mySelect") 填充了通过 HTML 添加的 3 个选项。另一个 (id="lvlDropMenu") 有 20 个选项，并使用 for 循环填充，这样如果我想更改 LvlDropMenu 的长度(我计划这样做)，就不必手动添加或删除新选项。

我想做的事:

使用纯 JavaScript 当我单击“开始按钮”时，我想根据所选“mySelect”的数据层修改 LvlDropmenu 中显示的选项。

例如:

当我选择对象 1(它的数据层 = T1)并单击开始按钮时，我希望“lvlDropDown”仅显示选项 5-15。

问题:

理想情况下，我想使用类似于 slice() 的方法来提取和显示选项，但据我所知，它仅适用于字符串。

考虑到这一点，是否会更有效:

• 创建一个包含 N 个值的数组
• 创建一个 for 循环来遍历数组并添加新选项，每个值/innerHTML 等于 N++(选项 1、选项 2 等)
• 根据所选对象的数据层创建 if 语句来 slice()/修改数组，以便依次修改 for 循环？

任何提示或可行的解决方案将不胜感激，因为我已经被踩了好几天了。

for (var i = 1; i <= 20;i++)
selectLvl.add(new Option(i));

var startBtn = document.getElementById("startBtn");
startBtn.addEventListener("click", start);

function start(){
var mySelect = document.getElementById("mySelect");

var selectedObjectTier = mySelect.options[mySelect.selectedIndex].getAttribute("data-tier");

if(selectedObjectTier == "T1")
{mySelect.length = 1}
//to make sure button/conditions work
//what I actually want is for the LvlDropMenu to display options 5-15
else{alert("Other")};;



};

<select id="mySelect" size="4">
  <option value="Object 1" data-tier="T1">Object 1</option>
  <option value="Object 2" data-tier="T2">Object 2</option>
  <option value="Object 3" data-tier="T3">Object 3</option>
</select>


<form id="lvlDropMenu">
  <select name="selectLvl" id="selectLvl">
        <option>Choose your Level:</option>
    </select>
</form>

<button type="button" id="startBtn" class="menu" >Start</button>

Answer 1

插入<form>一个新的<select>有特定选项 每次单击按钮时。

设置data-tier的预定义开始和结束

var dataTiers = {
  T1: [5, 15],
  T2: [3, 13],
  T3: [1, 10]
}

总共

var button = document.getElementById("startBtn");
var dataTiers = {
  T1: [5, 15],
  T2: [3, 13],
  T3: [1, 10]
}

function insertSelectIntoForm(formId, selectId, arr) { // id === name, arr -> [start, end]
  var form = document.getElementById(formId),
    select = document.createElement("select"),
    choose = new Option(),
    text = document.createTextNode("Choose your Level: ");

  form.innerHTML = ""; // Clear form

  select.setAttribute("name", selectId);
  select.setAttribute("id", selectId);
  choose.appendChild(text);
  select.appendChild(choose);

  for (var i = arr[0]; i < (arr[1] + 1); i += 1) { // arr[0] === start, arr[1] === end
    var option = new Option(i);
    option.setAttribute("value", i); // Set value
    select.appendChild(option);
  }
  form.appendChild(select);
}

function start() {
  var select = document.getElementById("mySelect"),
    dataTier = select.options[select.selectedIndex].getAttribute("data-tier");
  insertSelectIntoForm("lvlDropMenu", "selectLvl", dataTiers[dataTier]);
}

insertSelectIntoForm("lvlDropMenu", "selectLvl", [1, 20]);
button.addEventListener("click", start);

<select id="mySelect" size="4">
  <option value="Object 1" data-tier="T1">Object 1</option>
  <option value="Object 2" data-tier="T2">Object 2</option>
  <option value="Object 3" data-tier="T3">Object 3</option>
</select>

<!-- Empty form, select will be created with JavaScript -->
<form id="lvlDropMenu"></form>

<button type="button" id="startBtn" class="menu">Start</button>