Javascript:如何从文本框中创建选择列表选项?

时间:2013-03-05 20:31:14

标签: javascript html textbox

我如何使用用户输入的新选项填充我的选择列表?

到目前为止,这是我的JS:

<script type="text/javascript">
function show_prompt() {
    var name = prompt('Please enter new origin');
    if (name != null && name != "") {
      var select = document.getElementById("OriginSelect");
      select.options[select.options.length] = new Option('Text 1', 'Value1');
    }
}

以下是正文中的HTML \ Coldfusion:

<p class="_30NP" align="right">
                                <label>Origin&nbsp;</label>
                            </p>

                            <p class="_20NP">
                              <cfselect  name="OriginSelect" id="OriginSelect" query="Origin" display="description" value="code"  required="yes">
                              <option id="new" value="new" onClick="show_prompt()">New Origin</option>
                              </cfselect>
                            </p>

                            <a href="#" onClick="show_prompt()">New Origin</a>

所以基本上,列表从数据库中填充,但是当没有合适的Origin可用时,用户可以单击href并出现一个带有文本字段的提示框(这很好用)。然后用户可以输入他喜欢的任何内容,然后JS脚本将新元素添加到标签。

然而,在用户点击&#34; ok&#34;之后它没有做任何事情。在输入文本并做好之后。 Chrome中的javascript调试程序也没有显示任何有用的内容,没有标记错误或任何错误。

事实上,这是一个问题吗?我自己手动添加了一个选项(id =&#34; new&#34;)并且它显示得很好。

编辑:好吧,这不是cfselect的错。我把它变成了一个常规选择框,它仍然无法工作..

1 个答案:

答案 0 :(得分:0)

使用appendChild功能

function show_prompt() {
    var name = prompt('Please enter new origin');
    if (name != null && name != "") {
      var select = document.getElementById("OriginSelect");
      var option = new Option(name);
      select.appendChild(option);
    }
}