添加新選項以選擇菜單

這是一個非常簡單的選擇欄。爲什麼它不起作用？添加新選項以選擇菜單

<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

添加新選項以選擇菜單

回答

相關問題