テキストボックスの値をドロップダウンリストに追加する方法

-2

ドロップダウンリストにはいくつかの値と他のオプションがあります。他のオプションを選択すると、テキストボックスが表示されます。テキストを入力する必要があります。ドロップダウンilst、どのように私はこれを解決することができますか？テキストボックスの値をドロップダウンリストに追加する方法

<!DOCTYPE html> 
    <html> 
    <head> 
    <script type="text/javascript"> 
    function CheckColors(val){ 
    var element=document.getElementById('color'); 
    if(val=='pick a color'||val=='others') 
     element.style.display='block'; 
    else 
     element.style.display='none'; 
    } 




    </script> 
    </head> 
    <body> 
     <select name="color" onchange='CheckColors(this.value);'> 
     <option>pick a color</option> 
     <option value="red">RED</option> 
     <option value="blue">BLUE</option> 
     <option value="others">others</option> 
     </select> 
    <input type="text" name="color" id="color" style='display:none;'/> 
    </body> 
    </html>

出典

2016-04-14 Shivaraj Mc

htmlとjavascriptのみを使用しています。 –

この操作を実行するイベントはありますか？あなたは、将来のユーザーのために 'other'オプションを望むことを意味しますか？ – Rayon

テキスト入力から新しいオプションノードを作成しますか？ – Kulvar

ボタンを追加し、それがothersまたはpickだ場合/それに応じてボタンを表示チェックするselect値を取得します。

、新しい要素を追加しoptionを作成し、x.add(option);

function CheckColors(){ 
var element = document.getElementById("mySelect"); 
var element2 = document.getElementById("color"); 
var element3 = document.getElementById("addColor"); 
if(element.value =='pick a color'|| element.value =='others'){ 
    element2.style.display='block'; 
    element3.style.display='block'; 
} 
else { 
    element2.style.display='none'; 
    element3.style.display='none'; 
    } 
} 

function addValue(){ 
    var textToAdd = document.getElementById("color").value; 
    var x   = document.getElementById("mySelect"); 
    var option  = document.createElement("option"); 
    option.text = textToAdd; 
    x.add(option); 
}

https://jsfiddle.net/7woyyw4h/

出典

2016-04-14 10:01:23 AshBringer

オプションに 'value'を追加してください！ – Rayon

私はそれを手に入れましたが、他の人の前にはそれが来なければなりません。 –

と選択の内側にそれを追加するには、コードの下に確認してください、それはあなたのために役立つことを願っています。

<script> 
$(document).ready(function(){ 
    $('#btnAddToBegining').click(function(){ 
     var data = $("#txtAdd").val(); 
     $("#ddlList").prepend("<option value='0' selected='selected'>"+ data +" </option>"); 
    }); 

    $('#btnAddToEnd').click(function(){ 
     var data = $("#txtAdd").val(); 
     $("<option value='6'>" + data +"</option>").appendTo("#ddlList"); 
    });  
}); 
</script> 

<select id="ddlList"> 
    <option value="1">ASP.NET</option> 
    <option value="2">C#</option> 
    <option value="3">VB.NET</option> 
    <option value="4">HTML</option> 
    <option value="5">jQuery</option> 
</select> 

<input type="text" id="txtAdd" /> 

<br/><br/> 
<input type="button" id="btnAddToBegining" Value="Add Item to Begining" /> 
&nbsp;&nbsp; 
<input type="button" id="btnAddToEnd" Value="Add Item to End" />

出典

2016-04-14 10:17:38 Krishna

テキストボックスの値をドロップダウンリストに追加する方法

答えて

関連する問題