Javascript 如何基于动态生成的链接填充文本字段？

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

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

---

不用说，我对这件事的看法有点扭曲。我开始进入jQuery，只想看看如何填写文本框。

首先，您的

供应商

数组中缺少引号：

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

接下来，您应该在

列表中使用
类
选择器，而不是
id
。供应商列表

元素：

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

接下来，根据元素的

id

选择元素时，缺少

符号：

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

（通过

$（“供应商联系人”）

您正在尝试选择一个不存在的标签

）

最后，使用类似于

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);
});

---

谢谢！这真是太棒了！我发现我还有很多东西要学。谢谢你帮助我在这方面不断进步。你真棒！

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

$.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);
});

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