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

【问题标题】：Dynamic appending of values in select dropdown appends empty field in dropdown when the option contains spacesDynamic appending of values in select dropdown appends empty field in dropdown when the option contains spaces
【发布时间】：2017-05-07 12:01:01
【问题描述】：

我有一个简单的下拉菜单，可以选择通过文本框的输入附加哪个值。

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

示例：“纽约”将附加为空。

// 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>');

先谢谢你

【问题讨论】：

$('.selectCity').append(''); // 这个字段被转换成 "$('.selectCity').append(''+newCity+'');"通过堆栈溢出我不知道为什么
原来我 value='+newCity+' 这是两个词选项的问题。它应该是 value="'+newCity+'"

标签： javascript jquery html

【解决方案1】：

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

<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);

现在选择框也会有另一个选项“带空格的文本”。

See the DEMO here

【讨论】：

这也是追加一个空域
查看我更新的答案和演示......它现在可以工作了。如果它有效，请不要忘记接受这个答案。
谢谢伙计。我不知道为什么这行得通，而我的方法却没有。你能解释一下吗？？
我认为你放错了引号，“应该在外面，'应该是覆盖值的那个

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是一种非常简单的方法，可以将输入到文本框中的项目添加到选择列表中

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">

【讨论】：

【解决方案4】：

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

选择框包含一组option，如果你想添加新的option，那么首先你需要创建一个option并将其附加到你的Select Box。

试试这个-

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

【讨论】：

我使用了相同的代码。我正在尝试以这种格式发布问题，但该字段已修改为 $('.selectCity').append(''+newCity+'');
我是这个 stackover 流程的新手。还是谢谢

【解决方案5】：

只需要一些语音标记

$('.selectCity').append('<option value="'+newCity+'">'+newCity+'</option>');

【讨论】：