JavaScript数组对象下拉列表，仅使用某些属性

Question

我有一个具有两个属性的对象数组， firstName和lastName 。 在一个按钮上单击我想将下拉列表绑定到页面。 目前我有：

 $(document).ready(function ()
        {
            var obj1 =
                {
                    firstName: "john",
                    lastName: "smith"
                };
            var obj2 =
                {
                    firstName: "jane",
                    lastName: "doe"
                }
            var objArray = [];
            objArray.push(obj1);
            objArray.push(obj2);

            $('#btnSubmit').click(function ()
            {
                makeDropDown(objArray);
            });
            function makeDropDown(array)
            {
                var $sel = $('<select/>');
                for (var i = 0; i < array.length; i++)
                {
                    for (var prop in array[i])
                    {
                        if(prop=='firstName')
                            var $option = $('<option/>').val(array[i][prop]).html(array[i][prop]).appendTo($sel);
                    }
                }
                $sel.appendTo('body');
            }
        });

这行得通，但是我忍不住，但是有一种更好的方法。 我想我可以使该函数在if语句中使用另一个参数（其中firstName），但这对我来说也不对。 OO这样做的一种好方法是什么？

Answer 1

您可能可以创建一个简单的插件。

$.fn.createDropDown = function(options){ //Take options
    var textField = options.textField, //get textfieldName from options
        valueField = options.valueField || textField; //if no valueField specified default to text field
     this.each(function(){
         $('<select/>').append($.map(options.source, function (ob) { //iterate through the source
            if(!ob[textField]) return true; //skip if atleast text field is not availabe in the object
            return $('<option/>', {  //create option and return
                value: ob[valueField],
                text: ob[textField]
            });
        })).appendTo(this); //append to each of the element in the selector
    });
    return this; //return it for chaining
}

并用作

  var obj1 = {
        firstName: "john",
        lastName: "smith"
    };
    var obj2 = {
        firstName: "jane",
        lastName: "doe"
    }
    var objArray = [];
    objArray.push(obj1);
    objArray.push(obj2);

    var options = {  //set up options
       source:objArray,
       textField:'firstName',
       valueField:'firstName'
    }

    $('#btnSubmit').click(function () {
       $('body').createDropDown(options); //Just invoke it with options
    });

演示版

Answer 2

采用面向对象的方法既可以减少代码量，也可以减少出错的可能性。 让我们开始在对象中添加自定义序列化方法，以表达应如何将它们呈现为<option> 。 这样，我们不必在渲染每个循环时都编写该代码，而是对象本身可以告诉其余代码如何使它们出现在选择框中。

这是我们的第一遍。 我们将从天真的方法开始，通过在每个对象中内联我们的序列化方法，来展示在此处更加面向对象的另一个好处。

   var obj1 =
   {
     firstName: "john",
     lastName: "smith",
     toOption: function () {
         return $('<option/>').val(this.firstName).html(this.firstName);
     }
   };

   var obj2 =
   {
     firstName: "jane",
     lastName: "doe"
     toOption: function () {
       return $('<option/>').val(this.firstName).html(this.firstName);
     }
   };

   var objArray = [];
   objArray.push(obj1);
   objArray.push(obj2);

   $('#btnSubmit').click(function ()
   {
       makeDropDown(objArray);
   });

   function makeDropDown(array)
   {
            var $sel = $('<select/>');
            for (var i = 0; i < array.length; i++)
            {
                array[i].toOption().appendTo($sel);
            }
            $sel.appendTo('body');
   }

现在，我们的for循环更易于阅读，并且我们可以轻松地在其他位置创建这些<option>标记，而不必复制和粘贴该代码。

但这仍然不是最理想的，因为我们在每个对象中都编写了toOption函数。 由于我们发现自己在对象内部创建方法，而不是重复对其进行内联，因此让我们能够创建此类通用对象。 我称它为Person 。 另外，我们现在可以直接内联创建人员，而不用编写冗长的JavaScript对象。

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.toOption = function () {
         return $('<option/>').val(this.firstName).html(this.firstName);
    };
}

var objArray = [];
objArray.push(new Person('john', 'smith'));
objArray.push(new Person('jessica', 'jones'));

$('#btnSubmit').click(function () {
   makeDropDown(objArray);
});

 function makeDropDown(array) {
     var $sel = $('<select/>');
     for (var i = 0; i < array.length; i++) {
        array[i].toOption().appendTo($sel);
     }
     $sel.appendTo('body');
 }

这也意味着我们可以在一个地方而不是整个代码库中更改Person的呈现方式。

Answer 3

这与OO无关，但与代码的可重用性有关。 是的，属性名的参数很好。 您还可以返回select元素，而不是将其附加到主体，以提供更大的灵活性。

$(document).ready(function() {
    var objArr = [
        {
           firstName: "john",
           lastName: "smith"
        },
        {
            firstName: "jane",
            lastName: "doe"
        }
    ];
    $('#btnSubmit').click(function() {
        makeDropDown(objArray, "firstName").appendTo('body');
    });
    function makeDropDown(array, prop) {
        var $sel = $('<select/>');
        for (var i = 0; i < array.length; i++)
            $sel.append($('<option/>').val(array[i][prop]).text(array[i][prop]));
        return $sel;
    }
});