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

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 始终只会检索电子邮件，因为这是最后设置的内容。

要修复此问题，您可以获取下拉列表中选择的值并直接从 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。查看下面的 fiddle 以获得完整的工作示例:

Working example