[英]Populating a Select from list of Objects
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.' 它还将有一个称为populate的方法,该方法将地址附加到下面的选择中。
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>
Here's an example using ES6' Class
: 下面是使用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: 使用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>
What's stopping you? 什么事拦住你了? The following snippet is enough to append an option tag to the select
box. 下面的代码片段足以将选项标签附加到select
框。
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. 只需更改字符串的生成方式,即可将地址附加到选择框。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.