gpt4 book ai didi

javascript - 填充从对象列表中选择

转载 作者:行者123 更新时间:2023-12-03 05:21:21 25 4
gpt4 key购买 nike

我被要求“创建一个对象构造函数”。它将具有属性名称和地址。它还将有一个名为 populate 的方法,它将地址 append 到下面的选择中。'

到目前为止,我已经创建了对象构造函数,但我发现很难获取有关如何填充“选择”的信息。

我有:

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>

最佳答案

这是一个使用 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>

关于javascript - 填充从对象列表中选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41367259/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com