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

根据选项

1 个答案: