javascript - 如何将处理程序 ID 添加到 jQuery 加载的选项值

Question

我正在尝试使用 jQuery 将选择选项从 3 个数组加载到一个单击选择列表，到目前为止，这对我来说效果很好，在 here但我这里有一个问题。如果你看看我在三个列表中具有相同值的值，那么我必须通过将单击的按钮的 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);
    });

});

Answer 1

当您像这样创建选项时:

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

只需添加单击元素的 id 作为前缀即可:

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

工作示例:http://jsfiddle.net/g8euy/这样，当您将所有点击处理程序合并到一个函数中(您应该这样做，因为您有三个函数执行相同的操作)时，您就一切就绪了。

更新:我重写了您的代码以仅使用单个函数。示例如下:http://jsfiddle.net/n2tBC/1/

我向您的按钮添加了一个类和一个数据属性:

<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>

然后脚本将您的值列表组合到一个对象中，并且有一个函数可以根据单击的按钮的 data-val 获取数据:

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

});

现在，当您添加更多按钮时，无需添加更多代码。