填充對象列表中的選擇

Question

我被要求'創建一個對象構造函數。 它將具有屬性名稱和地址。 它還將有一個稱為populate的方法，該方法將地址附加到下面的選擇中。

到目前為止，我已經創建了對象構造函數，但是我發現很難找到有關如何填充“選擇”的信息。

我有：

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);

選擇是：

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

        </select><br>

我將如何用這些對象填充此選擇？ 我假設必須有一種無需硬編碼的方法？

謝謝。

******更新代碼******

<!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

下面是使用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>

使用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

什么事攔住你了？ 下面的代碼片段足以將選項標簽附加到select框。

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

只需更改字符串的生成方式，即可將地址附加到選擇框。

填充對象列表中的選擇

問題描述

2 個解決方案

解決方案1
1 已采納 2016-12-28 18:03:47

解決方案2
0 2016-12-28 18:00:14

填充對象列表中的選擇

問題描述

2 個解決方案

解決方案1 1 已采納 2016-12-28 18:03:47

解決方案2 0 2016-12-28 18:00:14

解決方案1
1 已采納 2016-12-28 18:03:47

解決方案2
0 2016-12-28 18:00:14