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>

Answer 2

在你的“if”句子中你创建了一个新的元素“option”，所以总是与你的“value”不同，所以总是在你的“select”标签中创建一个新元素您需要迭代“select”标记的元素以查找其值是否存在

Javascript检查文本框的下拉值

2 个答案: