使用Javascript中的选项动态添加输入类型选择 [英] Dynamically add input type select with options in Javascript

问题描述

我发现向JavaScript中添加输入非常简单，但由于某些原因，将选项添加到选项不起作用。这些选项出现在下拉菜单之外。

这是我在jsfiddle中的代码： http://jsfiddle.net / LNVTQ /

这是我的内联代码：

  var choices = []; 
 choices [0] =one; 
 choices [1] =two; 
 
 function addInput（divName）{
 var newDiv = document.createElement（'div'）; 
 newDiv.innerHTML =< select>; 
 for（i = 0; i  newDiv.innerHTML = newDiv.innerHTML +< option value ='+ choices [i] +' > 中选择+ [I] + < /选项>中; 
} 
 newDiv.innerHTML = newDiv.innerHTML +< / select>; 
 document.getElementById（divName）.appendChild（newDiv）; 
} 
  

和HTML：

 < form class =newmethod =postaction =/ jobs> 
< div id =dynamicInput>< / div> 
< input type =buttonvalue =Addonclick =addInput（'dynamicInput'）; /> 
< input type =buttonvalue =Save/> 
< / form> 
  

我会接受使用jQuery或者只是vanilla Javascript的答案。

解决方案

Pure Vanila JS

var choices = [one，two ]; function addInput（divName）{var newDiv = document.createElement（'div'）; var selectHTML =; selectHTML = LT;选择> 中; for（i = 0; i

< form class =newmethod =postaction =/ jobs> < div id =dynamicInput>< / div> < input type =buttonvalue =Addonclick =addInput（'dynamicInput'）; /> < input type =buttonvalue =Save/>< / form>

b



jQuery版本

var options = [one，two]; function addInput（ （选择，函数（a，b））{select.append（$（< option />）。attr（value ，b）.text（b））;}）; $（＃+ divName）.append（select）;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js>< / script>< form class =new method =postaction =/ jobs> < div id =dynamicInput>< / div> < input type =buttonvalue =Addonclick =addInput（'dynamicInput'）; /> < input type =buttonvalue =Save/>< / form>

b

I have found adding inputs to a form is quite simple in Javascript, but for some reason adding the select input with options is not working. The options are appearing outside of the dropdown.

Here's my code in jsfiddle: http://jsfiddle.net/LNVTQ/

Here's my code inline:

var choices=[];
choices[0]="one";
choices[1]="two";

function addInput(divName){
    var newDiv=document.createElement('div');
    newDiv.innerHTML="<select>";
    for(i=0; i<choices.length; i=i+1){
        newDiv.innerHTML=newDiv.innerHTML+"<option value='"+choices[i]+"'>"+choices[i]+"</option>";
    }
    newDiv.innerHTML=newDiv.innerHTML+"</select>";
    document.getElementById(divName).appendChild(newDiv);
}

And the HTML:

<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

I will accept answers using jQuery or just vanilla Javascript.

解决方案

Pure Vanila JS

var choices = ["one", "two"];

function addInput(divName) {
    var newDiv = document.createElement('div');
    var selectHTML = "";
    selectHTML="<select>";
    for(i = 0; i < choices.length; i = i + 1) {
        selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";
    }
    selectHTML += "</select>";
    newDiv.innerHTML = selectHTML;
    document.getElementById(divName).appendChild(newDiv);
}

<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

jQuery Version

var choices = ["one", "two"];

function addInput(divName) {
    var select = $("<select/>")
    $.each(choices, function(a, b) {
        select.append($("<option/>").attr("value", b).text(b));
    });
    $("#" + divName).append(select);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<form class="new" method="post" action="/jobs">
    <div id="dynamicInput"></div>
    <input type="button" value="Add" onclick="addInput('dynamicInput');" />
    <input type="button" value="Save" />
</form>

这篇关于使用Javascript中的选项动态添加输入类型选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！