Question

我有以下下拉菜单。

<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
 <option value="http://www.google.com">Google</option>
 <option value="http://www.yahoo.com">Yahoo</option>
 <option value="http://www.example.com">Example</option>
</select>

我是否可以添加两个文本输入字段，访问者可以自己填充菜单选项？

例如，在文本字段中，他们输入选项的URL和文本字段2，他们输入选项的名称。

所以... 文字字段1：http://www.randomwebsite.com 文本字段二：随机网站

然后是一个“添加”按钮，这将导致此...

<select id="MySelectMenu">
<option value="#">-*-*- Main Accounts -*-*-</option>
 <option value="http://www.google.com">Google</option>
 <option value="http://www.yahoo.com">Yahoo</option>
 <option value="http://www.example.com">Example</option>
 <option value="http://www.randomwebsite.com">Random Website</option>
</select>

这是当前菜单的javascript，如果有帮助的话。

<script type="text/javascript">
 function newSrc() {
  var e = document.getElementById("MySelectMenu");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementById("MyFrame").src=newSrc;
 }
</script>

提前致谢。

Answer 1

是创建两个文本框并向其添加ID，并创建一个带有onclick功能“添加”的按钮，然后使用以下javascript，这只是创建选项并附加到选择框

function Add()
{
    var x = document.getElementById("MySelectMenu");
     var opt = document.createElement("option");
        opt.value= document.getElementById("url").value;
        opt.innerHTML = document.getElementById("name").value; // whatever property it has
      x.add(opt);

}   


<select id="MySelectMenu">
      <option value="#">-*-*- Main Accounts -*-*-</option>
      <option value="http://www.google.com">Google</option>
      <option value="http://www.yahoo.com">Yahoo</option>
      <option value="http://www.example.com">Example</option>
   </select>
   <input type="text" name="name" id="name">
   <input type="url" name="url" id="url">
   <button onclick="Add()">ADD</button>

Answer 2

尝试以下代码

var url=$("#txtUrl").val(); var textValue = $("#txtDisplay").val(); $('#MySelectMenu').append("<option value='"+url+"'>"+textValue+"</option>);

在添加按钮的OnClick事件中使用此代码。

访问者如何通过文本字段向菜单添加选项？

2 个答案: