2013-05-30 6 views
1

Я хочу заполнить поле списка html (select tag) содержимым файла (каждая строка файла должна стать единственной опцией в списке (select element)).Как заполнить список с содержимым файла динамически?

Предположим, у меня есть файл сказать "load_lines.txt", содержащий

s1.txt 
s2.txt 
s3.txt 
s4.txt 
s5.txt 

существует HTML-форм

<html> 
    <head> 
    <title>List box Loading</title> 
    </head> 

    <body> 
    <form id="frm1" name="frm1" action="" method="GET"> 

     <select id="lb" name="lb" size="5"> 
     </select><br /><br /> 

     <input type="button" id="btn1" name="btn1" value="OK" /> 

    </form> 
    </body> 
</html> 

при загрузке формы он должен заполнить поле списка (выберите элемент) с содержанием файл "load_lines.txt".

может кто-нибудь сказать, как это сделать, используя javascript ?. укажите код javascript.

+3

Я бы предложил использовать PHP или ASP; видя, как довольно трудно читать текстовые файлы в чистом JavaScript, говорящем кросс-браузером ... – faino

+1

JavaScript работает в браузере клиента, и файл будет расположен там, где веб-страница включена на сервере - вам придется использовать некоторые вид серверной реализации –

+0

[Это может помочь] (http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=l_8MkZJevpf), хотя это функция HTML5 и пока не поддерживается. – faino

ответ

1

Вот быстрый способ выполнить работу. Надеюсь это поможет.

<form id="frm1" name="frm1" action="" method="GET"> 
    <select id="lb" name="lb" size="5"></select> 
    <br /> 
    <br /> 
    <input type="button" id="btn1" name="btn1" value="OK" /> 
</form> 
<script> 
     var client = new XMLHttpRequest(); 
     client.open('GET', 'load_lines.txt'); 
     client.onreadystatechange = function() { 
       t = client.response 
       t = t.split('\n'); 
       var listbox; 
       for(i=0;i<t.length;i++){ 
         listbox +='<option value="'+i+'">'+t[i]+'</option>'; 
       } 
       document.getElementById('lb').innerHTML=listbox; 
     } 
     client.send(); 
</script> 
+0

не работает. поле списка пуст. – Rahul

+0

О, это работает, берут гусак http://just-lewis.com/list.php –

+0

Пример @ Рахул Льюис действительно работает. Повторите попытку. – gibberish

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