javascript - 从 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>`
}