Baner Baner - 3 months ago 11x
HTML Question

Getting rid of undefined in select options

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src=""></script>
<link href='' rel='stylesheet' type='text/css'>
<link href='' rel='stylesheet' type='text/css'>
<img src="logo.png" >
<li><a href="/">Parse Symbol File</a></li>
<li><a class="active" href="/upload">Upload File</a></li>
<li><a href="/continuous">Continous Data</a></li>
<li><a href="/output">Output</a></li>
</br> </br>
<label> Upload a File </label> </br> </br>
<input type=file id=files />
<button id=upload>Upload</button>
</br> </br> </br>
<form action="/output3" method="post" >
<div class="fieldBlock">
<label >Parameter Name: </label>
<select type=text id=name name="name" style="width: 12em;"> </select> </br> </br>
<label >Address: </label>
<select type=text id=address name="address" style="width: 12em;"> </select> </br> </br>
<label >Size: </label> </br>
<select type=text id=size name="size"style="width: 12em;"> </select> </br> </br>
<label >Data: </label> </br>
<input type=text id=data name="data"style="width: 12em;"> </input> </br> </br>
<input type="submit" value="Read" name="Read">
<div class="fieldBlock">
<label >Parameter Name 2: </label>
<select type=text id=name2 name="name2" style="width: 12em;"> </select> </br> </br>
<label >Address 2: </label>
<select type=text id=address2 name="address2" style="width: 12em;"> </select> </br> </br>
<label >Size 2: </label> </br>
<select type=text id=size2 name="size2"style="width: 12em;"> </select> </br> </br>
<label >Data 2: </label> </br>
<input type=text id=data2 name="data2"style="width: 12em;"> </input> </br> </br>
<button type="submit" formaction="/output4" formmethod="post">Write</button>
var fileInput = $('#files');
var uploadButton = $('#upload');

uploadButton.on('click', function() {
if (!window.FileReader) {
alert('Your browser is not supported')
var input = fileInput.get(0);

// Create a reader object
var reader = new FileReader();
if (input.files.length) {
var textFile = input.files[0];
$(reader).on('load', processFile);
} else {
alert('Please upload a file before continuing')

function processFile(e) {
var file =,
if (file && file.length) {
results = file.split(",");
for (var i = 0; i < file.length; i=i+3) {
$('#name').append('<option val="1">' + results[i] + '</option>');
$('#name2').append('<option val="1">' + results[i] + '</option>');
for (var i = 1; i < file.length; i=i+3) {
$('#address').append('<option val="1">' + results[i] + '</option>');
$('#address2').append('<option val="1">' + results[i] + '</option>');
for (var i = 2; i < file.length; i=i+3) {
$('#size').append('<option val="1">' + results[i] + '</option>');
$('#size2').append('<option val="1">' + results[i] + '</option>');

I have code which reads an uploaded text file and sorts it as options for different
. Since i am using for loop and setting it less than file.length. All the options from text file are read correctly but once the text is done, the rest of the options show up as
. I wanted to know how to get rid of these
? If confusing, please comment below for further explanation.


I've updated your code. Check this Fiddle. It Worked for me for .txt file with content Arif, John, Sonya, SuperGirl, The Flash, Batman, Suparman

i added if statement to for loop, and combined your 3 loops into one

for (var i = 0; i < results.length; i=i+3) {
      $('#name').append('<option val="1">' + results[i] + '</option>');
      $('#name2').append('<option val="1">' + results[i] + '</option>');
   if(typeof results[i+1] !== 'undefined') {
      $('#address').append('<option val="1">' + results[i+1] + '</option>');
      $('#address2').append('<option val="1">' + results[i+1] + '</option>');
      if(typeof results[i+2] !== 'undefined') {

      $('#size').append('<option val="1">' + results[i+2] + '</option>');
      $('#size2').append('<option val="1">' + results[i+2] + '</option>');