Question

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

<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等？

Answer 1

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

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

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

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

这是下一个问题。然后，如果我想让人们添加新的选项，我需要在它上面添加一些php变量。我怎样才能添加php变量而不是op4，op5和...选项？

不，这与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);

现在输入值将用作新选项

的名称/值

Answer 2

试试这个：

<script>
    function s(){
        var o=new Option();
        o.value="<?php echo $option; ?>";
        o.text="<?php echo $option; ?>";
        var os=document.getElementById("sel1").options;
        os[os.length]=o;
    }
</script>

Answer 3

如果form已提交，且form元素没有action属性，则会重新加载当前页面。

您应该侦听submit事件，并使用事件对象的preventDefault方法阻止事件的默认操作。

document.querySelector('form').addEventListener('submit', function(event) {
    event.preventDefault();
    var option = new Option('optionText', 'optionValue');
    document.getElementById("sel1").add(option);
});

另一个选项是使用button元素type属性button而不是提交input。

Answer 4

我终于写完了答案。有两种方式;第一种方式比另一种方式更安全。第一种方式是：

<html>
<form>
    <label>
        <input type="text" id="option-name">
        <select id="sel1">
            <option> Option1 </option>
            <option> Option2 </option>
            <option> Option3 </option>
        </select>
        <input onclick="s()" type="button" value=" Create ! "><br/><br/>
    </label>
</form>
<script>
    function s(){
        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);
    }
</script>
</html>

这也是其他人的回答。但第二种方式更容易和有用。不安全（我认为innerhtml不是那么安全！但如果我错了，请告诉我。）！

<html>
<form method="post" action="index.php">
    <label>
        <input type="text" name="txt1">
        <select id="sel1">
            <option> Option1 </option>
            <option> Option2 </option>
            <option> Option3 </option>
        </select>
        <input type="submit" value=" Create ! ">
    </label>
</form>
<script>
    document.getElementById("sel1").innerHTML += "<option><?php echo $_POST['txt1']; ?></option>";
</script>

添加新选项以选择菜单

4 个答案: