javascript - 添加新选项以选择菜单

标签 javascript html

这是一个非常简单的选择栏。为什么不起作用?

<html>
<form>
    <label>
        <select id="sel1">
            <option> op1 </option>
            <option> op2 </option>
            <option> op3 </option>
        </select>
        <input onclick="s()" type="submit" value=" ok! ">
    </label>
</form>
<script>
    function s(){
        document.getElementById("sel1").innerHTML += "<option> op4 </option>";
    }
</script>
</html>

如果我希望人们添加新选项,我需要在上面添加一些变量。如何添加 php 变量而不是 op4、op5 等?

最佳答案

创建一个实际的 option 元素并将其附加到 select 元素。

var option = document.createElement("option");
option.value     = "op4";
option.innerHTML = "op4";

var select = document.getElementById("sel1");
select.appendChild(option);

您可能也应该在选项中使用 value 属性。

<小时/>

This is the next question. Then if i want people to add new option , i need to put some php variable on it. how can i add php variable instead of op4 , op5 and... options?

不,这与 PHP 无关。

<input id="option-name">

使用上面的示例,而不是使用固定的“op4”,而是使用输入中的值

var input = document.getElementById("option-name");

var option = document.createElement("option");
option.value     = input.value;
option.innerHTML = input.value;

var select = document.getElementById("sel1");
select.appendChild(option);

现在输入值将用作新选项的名称/值

关于javascript - 添加新选项以选择菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30155692/

相关文章:

javascript - 使用表单包装元素并进行 AJAX 调用时重新加载页面

javascript - 计算任意数量参数的平均值

javascript - 构造函数中的 DRY JavaScript 继承

html - 无法删除重叠的框阴影

javascript - 在 DOM 树中使用某种节点号进行元素搜索

javascript - 如果 URL 包含 6 位数字值并且包含 .pdf、.doc、.xls 等,则将数字值 append 到类中

javascript:如何保持事务(WebSql)事件

css - 将图标与 css 中的右中心对齐

html - 如何在CSS中响应动态加载不同宽度和高度的图像

html - 将元素扩展到 div 的宽度