循环对象并根据选项选择将值显示到列表中

Question

我有一个构造函数并创建了一些实例，我将它们放在一个数组中。我要做的是根据我从选项列表中选择的内容将所述对象的值显示到空列表中。这是我到目前为止所做的：

<ul id="contactinfo"></ul>

<select id="dropdown">
    <option value="email">Email</option>
    <option value="number">Phone Number</option>
</select>

function ContactList (name, email, number) {
this.name = name;
this.email = email;
this.number = number;
}

var christian = new ContactList('Christian', 'christian@yahoo.com', '323-555-124');
var contactarray = [christian];

function displayinfo () {
    var dropdown = $('#dropdown').val();
    var number = $('#dropdown').val('number');
    var email = $('#dropdown').val('email');

    for (i = 0; i < contactarray.length; i++) {
        if (dropdown == number) {
            $('#contactinfo').append('<li>' + contactarray[i].number + '</li>');
        } else {
            $('#contactinfo').append('<li>' + contactarray[i].email + '</li>');
        }
    }
}

displayinfo();

Answer 1

首先，请注意您当前代码的主要问题是 $('#dropdown').val()、$('#dropdown').val('number') 和 $('#dropdown').val('email') 都返回相同的内容 - jQuery 对象中的下拉列表。另请注意，后两者也将值设置为提供的值，因此 JS 将始终只检索 email，因为这是最后设置的。

要修复它，您可以使用下拉列表中选择的值并直接从contactarray 元素中检索该属性。试试这个：

function displayinfo () {
    var $contacts = $('#contactinfo').empty();
    for (i = 0; i < contactarray.length; i++) {
        $contacts.append('<li>' + contactarray[i][$('#dropdown').val()] + '</li>');
    }
}

最后，你还需要在select中的选项改变时执行displayinfo，同时清除之前附加的li。查看下面的小提琴以获得完整的工作示例：

Working example