当选项包含空格时，在select下拉列表中动态追加值会在下拉列表中追加空字段

Dynamic appending of values in select dropdown appends empty field in dropdown when the option contains spaces

本文关键字：追加 下拉列表 动态 字段 select 包含 选项 空格      更新时间：2023-09-26

我有一个简单的下拉列表，通过文本框中的输入来选择附加的值。

当输入的文本是一个没有空格的单词时，追加过程很好，但当文本包含空格时，追加一个空字段。

示例："New York"将被添加为空。

// City is a text box from which new city name is to be taken 
var newCity = $('#City').val();
//selectCity is a dropdown of the list of city
$('.selectCity').append('<option value='+newCity+'>'+newCity+'</option>');

手前感谢

好吧，我做了一个小提琴，并在现有的选择框中动态添加了一个带有空格的选项，它正在工作：

<select id = "select">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

纯文本：

var option = document.createElement("option");
var newOptionText = "Text with spaces"; //your input box value will come here.
option.text = newOptionText;
option.value = "newOption";
var select = document.getElementById("select");
select.appendChild(option);

现在，选择框还将有另一个选项"带空格的文本"。

请参阅此处的演示

$('.selectCity').append("<option value='new york'>new york</option>");

这里有一个非常简单的方法，可以将键入文本框的项目添加到选择列表中

Javascript：

$("input[type=button]").on("click",function(){
    $("select").append($("<option>" + $("input[type=text]").val() + "</option>"));
});

HTML:

<select></select><br/> 
New Item: <input type=text><input type=button value="add">

您不能将文本直接附加到选择框中

选择框包含一组option，如果要添加新的option，则首先需要创建一个option&将其附加到您的CCD_ 4。

试试这个-

 $('.selectCity').append('<option value="'+newCity+'">'+newCity+'</option>');//creating new option then append it to select

只需要一些语音标记

$('.selectCity').append('<option value="'+newCity+'">'+newCity+'</option>');
相关文章：