当选项包含空格时,选择下拉列表中的值的动态附加会在下拉列表中附加空字段

时间:2014-09-03 05:15:55

标签: javascript jquery html

我有一个简单的下拉列表选择从文本框输入的附加值。

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

  

例子:"纽约"将被添加为空。

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

先谢谢你

5 个答案:

答案 0 :(得分:0)

您无法将文字直接附加到选择框。

选择框包含一组option,如果您想添加新option,则首先需要创建一个option&amp;将其附加到您的Select Box

试试这个 -

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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

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

现在,选择框还有另一个选项&#34; Text With Spaces&#34;。

<强> See the DEMO here

答案 3 :(得分:0)

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

使用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 :(得分:0)

只需要一些语音标记

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