Javascript 根据文本框检查下拉值

Question

我需要根据下拉列表检查文本框值，如果该值不存在，则添加到列表中。

我有这个脚本:

            <select id="drop" onchange="ChooseContact(this)">
              <option value="Volvo Red">Volvo Red</option>
              <option value="Mers Blue">Mers Blue</option>
              <option value="Ferr red">Ferr red</option>
            </select>

function execute(data) { 
    var txtbox = document.getElementById ("txtServiceReportInspectedBy").value;
        if ( document.createElement('option').value != txtbox ) {
            var categories = document.getElementById("drop");
            var newOption = document.createElement('option');
            newOption.innerText = txtbox ;
            newOption.setAttribute('value', txtbox );
            categories.appendChild(newOption);
        }
    document.getElementById("drop").value = txtbox ;
}

但是新项目仍然会在下拉列表中创建，即使该项目已经存在。谢谢。

Answer 1

您没有在选项中搜索文本。以下是您可以执行此操作的方法:

add.addEventListener('click', execute);

function execute(data) { 
    var txtbox = txtServiceReportInspectedBy.value,
        optionTexts = Array.from(document.querySelectorAll('#drop>option'), 
                                 option => option.value);
    if ( !optionTexts.includes(txtbox) ) {
        var newOption = document.createElement('option');
        newOption.value = newOption.textContent = txtbox ;
        drop.appendChild(newOption);
    }
    drop.value = txtbox;
}

<input id="txtServiceReportInspectedBy"><button id="add">Add</button><br>
<select id="drop">
  <option value="Volvo Red">Volvo Red</option>
  <option value="Mers Blue">Mers Blue</option>
  <option value="Ferr red">Ferr red</option>
</select>