2015-10-03 5 views
2

Я пытаюсь заполнить выпадающее меню массивом javascript. Я могу получить отдельные элементы, но не весь массив. Я уверен, что этот вопрос задавали раньше, но не может найти ссылок. Любая помощь будет оценена по достоинству.с помощью javascript для прохода через раскрывающийся список html-массива

var sex=["male","female", "unknown"]; 

for (i=0;i<sex.length;i++){ 
var opt = document.createElement("option"); 
document.getElementById("m").innerHTML=sex[i]; 
} 

HTML, является:

<form name = "demo"> 
    <table id = "demo"> 
    <th>Demographics</th> 
    <tr><td>Sex</td><td><select><option id="m"></option></select></td></tr> 
    </table> 
    </form> 
+0

Текущий код перезаписывает список каждой итерации. – Jaco

+0

Как я могу это исправить? – David

+0

Вы пробовали использовать для каждого цикла? Что-то вроде (индекс в массиве). Вы также можете попробовать ... для ... но несовместимы с IE – LucaApo

ответ

1

См. Ниже непонятное решение вашей проблемы. Вы можете реорганизовать это приятнее, глядя код, если вы используете библиотеку JQuery, смотри, например What is the best way to add options to a select from an array with jQuery?

var sex = ["male", "female", "unknown"]; 
 

 
for (i = 0; i < sex.length; i++) { 
 
    var opt = document.createElement("option"); 
 
    document.getElementById("m").innerHTML += '<option id="' + i + '">' + sex[i] + '</option>'; 
 
}
<form name="demo"> 
 
    <table id="demo"> 
 
    <th>Demographics</th> 
 
    <tr> 
 
     <td>Sex</td> 
 
     <td> 
 
     <select id="m"> 
 

 
     </select> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</form>

+0

Это прекрасно работает. Это сэкономит мне столько усилий при написании избыточного кода. Благодарю. – David

0

Это метод, который я обычно использую, который работает:

Codepen Demo

HTML:

<form name="demo"> 
    <table id="demo"> 
    <th>Demographics</th> 
    <tr> 
     <td>Sex</td> 
     <td> 
     <select id = "sex"> 

     </select> 
     </td> 
    </tr> 
    </table> 
</form> 

Javascript:

//array to hold the persons sex 
var sex = ["male", "female", "unknown"]; 

//array to store html to add to the select list 
var html = []; 

//loop through the array 
for (var i = 0; i < sex.length; i++) {//begin for loop 

    //add the option elements to the html array 
    html.push("<option>" + sex[i] + "</option>") 

}//end for loop 

//add the option values to the select list with an id of sex 
document.getElementById("sex").innerHTML = html.join(""); 
+0

Попробуйте еще раз (не прошел первый раз) ... это прекрасно. Спасибо всем за ваши предложения. – David

0

Используйте шаблон libary как подчеркивание или рулей или усы. Его плохая практика для генерации html из javascript.

+0

Можете ли вы объяснить, почему, по вашему мнению, плохо создавать html из JavaScript. Использует ли подчеркивание, рули и усы JavaScript? –

+0

Вы можете Google, вы получите ответы на него. http://stackoverflow.com/questions/1284381/why-is-it-a-bad-practice-to-return-generated-html-instead-of-json-or-is-it –

Смежные вопросы