Javascript 如何将处理程序Id添加到jQuery加载的选项值

我试图通过使用jQuery从3个数组加载一个选择选项到一个单击的选择列表，到目前为止，这对我来说很好 但我这里有一个问题。如果你看一下这些值，我在三个列表中有相同的值，因此我必须通过将单击按钮的id添加到值中来升级它们，如下所示：

<option value="regi1NNN">NNN</option>

而不是

<option value="NNN">NNN</option>

取决于单击的按钮

这是我的密码：

$(document).ready(function () {
    var opt1 = ["AAAA", "BBBB", "NNN", "JJJJJ"];
    var opt2 = ["KKKK", "FFFF", "NNN", "TTTTT"];
    var opt3 = ["MMM", "NNN", "OOOO", "PPPPP"];

    $("#regi1").click(function () {
        $('#items option').remove();
        var option = '';
        for (i = 0; i < opt1.length; i++) {
            option += '<option value="' + opt1[i] + '">' + opt1[i] + '</option>';
        }
        $('#items').append(option);
    });
    $("#regi2").click(function () {
        $('#items option').remove();
        var option = '';
        for (i = 0; i < opt2.length; i++) {
            option += '<option value="' + opt2[i] + '">' + opt2[i] + '</option>';
        }
        $('#items').append(option);
    });
    $("#regi3").click(function () {
        $('#items option').remove();
        var option = '';
        for (i = 0; i < opt3.length; i++) {
            option += '<option value="' + opt3[i] + '">' + opt3[i] + '</option>';
        }
        $('#items').append(option);
    });

});

---

当您这样创建选项时：

option += '<option value="' +  opt1[i] + '">' + opt1[i] + '</option>';

只需添加单击元素的id作为前缀：

option += '<option value="' + this.id + opt1[i] + '">' + opt1[i] + '</option>';

工作示例：当您将所有单击处理程序合并为一个函数时，您应该这样做，因为您有三个函数执行相同的操作，所以您将全部设置

更新：我重写了你的代码，只使用一个函数。示例如下：

我在按钮中添加了一个类和一个数据属性：

<div class="container">
<div class="well">
    <div class="btn-group">
        <button type="button" class="btn btn-default listy" id="regi1" data-vals="opt1">Left</button>
        <button type="button" class="btn btn-default listy" id="regi2" data-vals="opt2">Middle</button>
        <button type="button" class="btn btn-default listy" id="regi3" data-vals="opt3">Right</button>
    </div>
    <br />
    <br />
    <select id="items"></select>
</div>
</div>

然后脚本将您的值列表合并到一个对象中，有一个函数根据单击按钮的数据值获取数据：

$(document).ready(function () {
var myVals = {
    opt1:  ["AAAA", "BBBB", "NNN", "JJJJJ"],
    opt2:  ["KKKK", "FFFF", "NNN", "TTTTT"],
    opt3: ["MMM", "NNN", "OOOO", "PPPPP"]
}


$(".listy").click(function () {
    $('#items option').remove();
    var clickedButton = $(this);
    var valueList = myVals[clickedButton.data('vals')];
    var option = '';
    for (i = 0; i < valueList.length; i++) {
        option += '<option value="' + this.id + valueList[i] + '">' + valueList[i] + '</option>';
    }
    $('#items').append(option);
});

});

---

现在，当您添加更多按钮时，您不会添加更多代码。

您不认为最好在表单中包含一个单独的隐藏输入，告诉您单击了哪个按钮，而不是弄乱值吗？或者，由于您要在单独的循环中输出每个元素，只需添加字符串值='+this.id+opt1[i]+'。顺便说一句，你可以用一次点击功能而不是三次点击。非常感谢，这真的很有帮助