Adding values from javascript array to a dropdown box in an html table.

Wanting2LearnMan
Wanting2LearnMan used Ask the Experts™
on
I have the following code which adds a row to a html table when a button is pressed.

 $(table).append(
            '<tr><td><input  class="SettingsListField save_pending" type="text" ' +
            'id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '"></td>'+
            '<td><input  class="SettingsListField save_pending" type="text" ' +
            'id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '"></td>'+
	    '<td><select class="CustomSelect1 not_changed" id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '"> <option>"item1"</option>></td>'+
            '<td><div class="SettingsIconContainer"><a class="InputListbtnRemove" onclick="return false;">'+
            '<img src="/static_media/img/RemoveButton2_small.png" alt="Remove address details" /></a></div></td>'+
            '<td><div class="SettingsStatusContainer" id="' + $(this).attr('id') + '_' + newIndex + '_status"></div></td>'+
            '</tr>'
            ); 

Open in new window


I want to modify the line that adds the list box so that it iterates through an array of variables passed to it.

1. First I need to know how to pass this array from the html page to the javascript page.
I am using python on a django framework and I can pass a string variable like so:
On my html page:
 <div id="myDiv" max_list_length="{{ myPythonVaribale }} ">
                <table> blah blah
                </table>

Open in new window


On my javascript page I access this variable like so:
var MaxListLength = document.getElementById("myDiv").getAttribute("max_list_length");

Open in new window


2. Secondly I need to know how to modify above code that creates the table to add each element in the array to the dropdown box.

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Let's go step by step.

On your client page you'll have a div with an attribute where you'll load the array you want to use on javascript. To do this you can act in several ways:

1) You can separate each element with a separator character and convert the string directly into an array on javascript just using split('<yourSeparatorChar');

2) You can set the values in a JSON fashion and just evaluate the string on your javascript to convert them to an object. This is prettier, but a bit more complex.

Once you have an array you'll need to modify the string you're building so you loop through array elements building the dropdownlist.

//Suposing arrayValues your loaded array
var htmlCode = '<tr><td><input  class="SettingsListField save_pending" type="text" ' +
            'id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '"></td>'+
            '<td><input  class="SettingsListField save_pending" type="text" ' +
            'id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '"></td>'+
	    '<td><select class="CustomSelect1 not_changed" id="' + $(this).attr('id') + '_' + newIndex + '" name="' + $(this).attr('id') + '">';

for(var x=0;x < arrayValues.length;x++)
   htmlCode += '<option>' + arrayValues[x] + '</option>';

htmlCode += '</select></td><td><div class="SettingsIconContainer"><a class="InputListbtnRemove" onclick="return false;">'+
            '<img src="/static_media/img/RemoveButton2_small.png" alt="Remove address details" /></a></div></td>'+
            '<td><div class="SettingsStatusContainer" id="' + $(this).attr('id') + '_' + newIndex + '_status"></div></td>'+
            '</tr>';

$(table).append(htmlCode);
             

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial