html 如何在select标签上动态定义所选选项,(使用模板文字)

6gpjuf90 于 2023-03-11 发布在其他

关注(0)|答案(2)|浏览(116)

我正在尝试用模板文字创建一些html元素。我知道我可以有一个for循环，一个接一个地创建选项，但我发现这是混乱的代码。这是我可以开始工作的最好方法。有没有一个更简单的方法，我完全错过了？

/* creating the table */
  let propertyTable = document.createElement('table');
  propertyTable.classList.add('expand','ignore');

  let selected = ["", "", "", "", "", ""];

  switch (this.type) {
    case "number":
      selected[0] = "selected";
    break;
    case "dropDown":
      selected[1] = "selected";
    break;
    case "autoSet":
      selected[2] = "selected";
    break;
    case "plotly":
      selected[3] = "selected";
    break;
    case "gradeGroup":
      selected[4] = "selected";
    break;
    case "generate":
      selected[5] = "selected";
    break;
  }

  /* starting the property table */
  propertyTable.innerHTML = `<tr class="ignore">
    <th class="ignore">ID</th>
    <td class="ignore"><input class="tile ignore" value="${this.id}"></td>
  </tr>
  <tr class="ignore">
    <th class="ignore">Type</th>
    <td class="ignore">
      <select class="tile ignore">
        <option value="number" ${selected[0]} class="ignore">number</option>
        <option value="dropDown" ${selected[1]} class="ignore">dropDown</option>
        <option value="autoSet" ${selected[2]} class="ignore">autoSet</option>
        <option value="plotly" ${selected[3]} class="ignore">plotly</option>
        <option value="gradeGroup" c${selected[4]} lass="ignore">gradeGroup</option>
        <option value="generate" ${selected[5]} class="ignore">generate</option>
      </select>
    </td>
  </tr>`;

Html

来源：https://stackoverflow.com/questions/75653984/how-to-dynamically-define-the-selected-option-on-the-select-tag-using-template

2条答案

按热度按时间

6ojccjat1#

使用类型名数组代替大的switch语句。

let selected = ["", "", "", "", "", ""];
let types = ["number", "dropDown", "autoSet", "plotly", "gradeGroup", "generate"];
let index = types.findIndex(this.type);
if (index >= 0) {
  selected[index] = "selected";
}

赞(0）回复(0）举报 2023-03-11

cbjzeqam2#

你能尝试一个更简单的函数，用相关的类型调用，比如：（注意这是伪代码，根据需要进行调整）

function select_class(selector) do
  if (this.type == selector) do
    "selected"
  else
    ""
  end
end

然后在创建选择选项时，将其命名为：

/* creating the table */
  let propertyTable = document.createElement('table');
  propertyTable.classList.add('expand','ignore');

  /* starting the property table */
  propertyTable.innerHTML = `<tr class="ignore">
    <th class="ignore">ID</th>
    <td class="ignore"><input class="tile ignore" value="${this.id}"></td>
  </tr>
  <tr class="ignore">
    <th class="ignore">Type</th>
    <td class="ignore">
      <select class="tile ignore">
        <option value="number" ${select_class("number")} class="ignore">number</option>
        <option value="dropDown" ${select_class("dropDown")} class="ignore">dropDown</option>
        <option value="autoSet" ${select_class("autoSet")} class="ignore">autoSet</option>
        <option value="plotly" ${select_class("plotly")} class="ignore">plotly</option>
        <option value="gradeGroup" ${select_class("gradeGroup")} lass="ignore">gradeGroup</option>
        <option value="generate" ${select_class("generate")} class="ignore">generate</option>
      </select>
    </td>
  </tr>`;

但实际上，有一个函数来构建每个选项将是理想的。

function create_option(selector) do
  `<option value="${selector}" ${select_class(selector)} class="ignore">${selector}</option>`
end

你可以这样说：

/* starting the property table */
  propertyTable.innerHTML = `<tr class="ignore">
    <th class="ignore">ID</th>
    <td class="ignore"><input class="tile ignore" value="${this.id}"></td>
  </tr>
  <tr class="ignore">
    <th class="ignore">Type</th>
    <td class="ignore">
      <select class="tile ignore">
        ${create_option("number"}
        ${create_option("dropDown"}
        ${create_option("autoSet"}
        ${create_option("plotly"}
        ${create_option("gradeGroup"}
        ${create_option("generate"}
      </select>
    </td>
  </tr>`;

赞(0）回复(0）举报 2023-03-11

我来回答

html 如何在select标签上动态定义所选选项,(使用模板文字)

2条答案

相关问题

热门标签

最新问答