Question

我正在尝试使这个函数可以重用，而不用硬编码我从控制器返回的文本和val字段。我很接近，但我不能连接文本元素。有关这如何工作的想法，或更好的方法吗？

$(document).ready(function() {
    buildDropdown('MarketSegmentID', '/Home/GetMarketSegments', 
                'this.MarketSegmentID', 'this.Segment' + '/' + 'this.SubSegment');
});

function buildDropdown(fieldName, controllerPath, ddValue, ddText) {
    var options = $("#" + fieldName);

    $.getJSON(controllerPath, function (items) {
        $.each(items, function() {
            options.append($("<option />").val(eval(ddValue)).text(eval(ddText)));
        });
    });
}

Answer 1

好的，首先要小心使用javascript中的eval - 你可能不容易在这里滥用，但是值得理解为什么人们常说eval=evil

第一个，设置选项的.val很容易。将参数传递为'Segment'，您只需使用方括号表示法来读取属性：

options.append($("<option />").val(this[ddValue])....

第二个更难，你想在传入的对象上构建一个由2个属性组成的模式，我想你想让它尽可能地动态化。一个选项是传递一个充当委托的函数 - 实际上我很想对这两个属性（val和text）执行此操作。最后的事情看起来像这样：

function buildDropdown(fieldName, controllerPath, ddValueFunc, ddTextFunc) {
    var options = $("#" + fieldName);

    $.getJSON(controllerPath, function (items) {
        $.each(items, function() {
            options.append($("<option />").val(ddValueFunc(this)).text(ddTextFunc(this)));
        });
    });
}

你会这样称呼它：

$(document).ready(function() {
    buildDropdown('MarketSegmentID', '/Home/GetMarketSegments', 
                  function(o) { return o.MarketSegmentID }, // this function build the val
                  function(o) { return o.Segment + '/' + o.SubSegment } // this function builds the text
                );
});

尝试构建一个可重用的函数来使用JavaScript和JQuery构建下拉列表

1 个答案: