Question

它的要点是我根据JQuery中的数组动态生成下拉列表。我旁边有一个文本字段，应该根据数组中选择的内容输出答案。

<ul>
    <li>
        Vendor Contacts
        <ul class="vendor_list">    
        </ul>
    </li>
    <input id="vendor_contact" type="text" />
</ul>

这是我设置的HTML，这里是Javascript：

var vendors = ['vendor1, vendor2, vendor3'];
var contact_info = ['email1','email2','email3']

var vList = $('ul.vendor_list');
$.each(vendors, function (i) 
{
    var li = $('<li/>')
        .addClass('menu_item')
        .attr('role', 'menuitem')
        .appendTo(vList);
    var aaa = $('<a/>') 
        .addClass('vendors')
        .text(vendors[i])
        .appendTo(li);
});

我认为下一步是：

$("#vendor_list").on('click', '.vendors', function () {
    $("vendor_contact")val($(contact_info[i]))

毋庸置疑，我觉得这个问题很糟糕。我开始进入jQuery，只想看看如何填写文本框。

Answer 1

首先，vendors数组中缺少引号：

var vendors = ['vendor1', 'vendor2', 'vendor3'];

接下来，您应该在class元素上使用id选择器，而不是.vendor_list：

$(".vendor_list").on('click', '.vendors', function () {
    // ...

接下来，丢失#符号，因为您正在通过id选择元素：

$("#vendor_contact")val(//...

（$("vendor_contact")您试图选择不存在的代码<vendor_contact>）

最后，使用data属性来确定实际选择：

$.each(vendors, function(i){
    var li = $('<li/>')
        .addClass('menu_item')
        .attr('role', 'menuitem')
        .appendTo(vList);
    var aaa = $('<a/>') 
        .addClass('vendors')
        .text(vendors[i])
        // add 'data-id' attr:
        .data('id', i)
        .appendTo(li);
});

最终JS：

$(".vendor_list").on('click', '.vendors', function () {
    $("#vendor_contact").val(contact_info[$(this).data('id')]);
});

JSFiddle Demo

如何根据动态生成的链接填写文本字段？

1 个答案: