从 javascript 文字中设置所选选项的简洁方法

Question

我正在尝试使用 Javascript 文字设置所选选项。

function getHtmlFromTask(task) {
    let markup =        
    `<select class="custom-select d-block" id="stack" value="${task.stack}" required="">
        <option value="">Choose...</option>
        <option value="java">java</option>
        <option value="go">go</option>
        <option value="python">pyhton</option>
        <option value="react">react</option>
        <option value="javascript">javascript</option>
    </select>`
    return markup
}

我目前正在执行以下操作，但是否有更简洁的方法来执行此操作，因为我的列表会随着时间的推移而改变？

<select class="custom-select d-block" id="stack" required="">
    <option value="">Choose...</option>
    <option value="java"       ${task.stack.match("java") ? 'selected' : ''}>java</option>
    <option value="go"         ${task.stack.match("go") ? 'selected' : ''}>go</option>
    <option value="python"     ${task.stack.match("python") ? 'selected' : ''} >python</option>
    <option value="react"      ${task.stack.match("react") ? 'selected' : ''}>react</option>
    <option value="javascript" ${task.stack.match("javascript") ? 'selected' : ''}>javascript</option>
</select>

Answer 1

如果将 option 元素的创建分开，它可能会更清楚，这是您可以着手进行的一种可能方法：

function getHtmlFromTask(task) {
    let markup =        
    `<select class="custom-select d-block" id="stack" value="${task.stack}" required="">
        <option value="">Choose...</option>
        ${ buildOption('java', task) }
        ${ buildOption('go', task) }
        ${ buildOption('python', task) }
        ${ buildOption('react', task) }
        ${ buildOption('javascript', task) }
    </select>`
    return markup
}

function buildOption(value, task) {
  return `<option value="${value}" ${task.stack.match(value) ? 'selected' : ''}>${value}</option>`
}

从 javascript 文字中设置所选选项的简洁方法

neat way to set selected option from javascript literal

javascript

literals

html-templates