аккуратный способ установить выбранную опцию из буквального javascript - PullRequest
Новая
       61

аккуратный способ установить выбранную опцию из буквального javascript

0 голосов
/ 16 января 2020

Я пытаюсь установить выбранную опцию, используя 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>

1 Ответ

1 голос
/ 16 января 2020

Если вы выделите создание элементов option, это может быть более понятным, вот один из возможных способов go сделать это: 

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>`
}
...