添加新选项以选择菜单

这是一个非常简单的选择栏。为什么它不起作用？添加新选项以选择菜单

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

来源

2015-05-10 Sonoo

的innerHTML将取代'sel1'元素应有尽有，让你最终将不得不ONY一个选项有.. – whatever

@whatever不完全是，OP使用'+ ='。 – undefined

@Vohuman是的... – whatever

创建一个实际的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);

使用的值

来源

2015-05-10 19:23:15 naomik

如果我们考虑并添加keewnn和vohuman答案给这个答案，那么这个答案是最好的。 tnx所有。 – Sonoo

试试这个：

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

来源

2015-05-10 19:25:46

我在第一行函数“Var o = new option（）;”中出现错误你能告诉我什么可以在这个代码上做“os”吗？ – Sonoo

我的错字：新的** O **与大写字母O –

更改此：

<input onclick="s()" type="submit" value=" ok! ">

要这样：

<input onclick="s()" type="button" value=" ok! ">

使用type="submit"将导致您的表单提交，因而你的网页被重新加载。使用type="button"可以防止这种情况发生。

来源

2015-05-10 19:32:22 keewnn

会发生什么情况是提交了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代替提交inputtype属性的button元件。

来源

2015-05-10 19:33:01 undefined

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

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

来源

2015-05-10 23:39:44 Sonoo

Hi @Vohuman。你能检查我的第二条安全路线吗？它安全吗？ – Sonoo

添加新选项以选择菜单

回答

相关问题