Populating a Select from list of Objects

Question

I have been asked to 'Create an object constructor. It will have properties name and address. It will also have a method called populate which appends the address to the select below.'

So far I have created the object constructor, but I am finding it difficult to source information on how to populate the 'Select'.

I have:

function Addresses(name, address) {

    this.name = name;
    this.address = address;

}

var Add1 = new Addresses("Tom", "16 Rose Wood, Builth Wells, LD5 6AD");
var Add2 = new Addresses("Frank", "Ty Siriol, Brecon, LD4 6TE");
var Add3 = new Addresses("Ryan", "19 Garth Road, Builth Wells, LD2 3AR");
var Add4 = new Addresses("Beth", "10 Rock Road, Crossgates, LD1 6RP");
var Add5 = new Addresses("Darryl", "32 Oaklands Crescent, Builth Wells, LD2 9TD);

The select is:

        <select name="address" id="addr">
            <option>Select address</option>

        </select><br>

How would I populate this select with that are these objects? I'm assuming there must be a way without hard-coding it?

Thank you.

****** UPDATED CODE ******

<!DOCTYPE html>
<html>
    <head>

        <title>Web Development with Javascript and AJAX</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/redmond/jquery-ui.css">
        <link rel="stylesheet" href="css/assign.css">
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>


        <script type="text/javascript">
/* 
 * Create an object constructor. It will have properties name and address. It will also have a method called populate which appends the address to the select below. 
 */

class Address {
  constructor(name, address) {
    // Constructor, as you already have.
    this.name = name;
    this.address = address;
  }
  populate(select) {
    // Parameter select is the id of the element you want to populate.
    var selectEl = document.getElementById(select);
    // Create option element.
    var option = document.createElement('option');
    // Fill it with information.
    option.text = this.name;
    option.value = this.name.toLowerCase();
    // Finally add it to the select element.
    selectEl.add(option);
  }
}

// Create some.
    var Add1 = new Address("Tom", "16 Rose Wood, Builth Wells, LD5 6AD");
    var Add2 = new Address("Frank", "Ty Siriol, Brecon, LD4 6TE");
    var Add3 = new Address("Ryan", "19 Garth Road, Builth Wells, LD2 3AR");
    var Add4 = new Address("Beth", "10 Rock Road, Crossgates, LD1 6RP");
    var Add5 = new Address("Darryl", "32 Oaklands Crescent, Builth Wells, LD2 9TD");

// Populate.
Add1.populate('select');
Add2.populate('select');
Add3.populate('select');
Add4.populate('select');
Add5.populate('select');



    </script>
    </head>

    <body>
        <header>
            <nav>
                <ul id="navigation">
                    <li>
                        <a href="food.html">Menu</a>
                    </li>
                    <li>
                        <a href="orderform.html">Order</a>
                    </li>


                </ul>
            </nav>
            <div style="clear: both"></div>
        </header>
        <div id="wrapper">
            <h1>Address</h1>


                <label for="address">Find your address:</label>

                <select name="address" id="addr">
                    <option>Select address</option>
                    <option id="Add1"></option>    
                    <option id="Add2"></option>    
                    <option id="Add3"></option>    
                    <option id="Add4"></option>    
                    <option id="Add5"></option>    
                </select><br>



                <br><br>
                <input type="submit" id="Submit" name="Submit" value="Submit" />

            </form>
        </div>

    </body>

</html>

Answer 1

Here's an example using ES6' Class :

 class Address { constructor(name, address) { // Constructor, as you already have. this.name = name; this.address = address; } populate(select) { // Parameter select is the id of the element you want to populate. var selectEl = document.getElementById(select); // Create option element. var option = document.createElement('option'); // Fill it with information. option.text = this.name; option.value = this.name.toLowerCase(); // Finally add it to the select element. selectEl.add(option); } } // Create some. var Add1 = new Address('Tom', '16 Rose Wood, Builth Wells, LD5 6AD'); var Add2 = new Address('Frank', 'Ty Siriol, Brecon, LD4 6TE'); // Populate. window.onload = () => { Add1.populate('addr'); Add2.populate('addr'); }

 <select id="addr"></div>

With ES5:

 function Address(name, address) { this.name = name; this.address = address; this.populate = function(select) { // Parameter select is the id of the element you want to populate. var selectEl = document.getElementById(select); // Create option element. var option = document.createElement('option'); // Fill it with information. option.text = this.name; option.value = this.name.toLowerCase(); // Finally add it to the select element. selectEl.add(option); } } // Create some. var Add1 = new Address('Tom', '16 Rose Wood, Builth Wells, LD5 6AD'); var Add2 = new Address('Frank', 'Ty Siriol, Brecon, LD4 6TE'); // Populate. window.onload = function() { Add1.populate('addr'); Add2.populate('addr'); }

 <select id="addr"></div>

Answer 2

What's stopping you? The following snippet is enough to append an option tag to the select box.

document.getElementById('addr').innerHTML += "<option>New address</option>";

Just change the way the string is generated, and you'll have the addresses appended to the select box.

Populating a Select from list of Objects

Question

2 answers

solution1
1 ACCPTED 2016-12-28 18:03:47

solution2
0 2016-12-28 18:00:14

Populating a Select from list of Objects

Question

2 answers

solution1 1 ACCPTED 2016-12-28 18:03:47

solution2 0 2016-12-28 18:00:14

solution1
1 ACCPTED 2016-12-28 18:03:47

solution2
0 2016-12-28 18:00:14