返回html選擇菜單的查找表

假設在HTML中有一個選擇菜單，我想要一個查找表來表示菜單中的值和描述。返回html選擇菜單的查找表

<select id="carMenu"> 
    <option value="P">Park</option> 
    <option value="R">Reverse</option> 
    <option value="N">Neutral</option> 
    <option value="D">Drive</option> 
</select>

現在一個構建在Javascript/JQuery的查找表的方法如下：

var lookup = {}; $('#carMenu>option').map(function() 
{ 
    lookup[this.value]=this.innerHTML; 
})

獲得

{ 
    P: "Park", 
    R: "Reverse", 
    N: "Neutral", 
    D: "Drive" 
}

是否有一個jQuery的方法來直接生成這個對象 - 而不是迭代外部提供的對象？

來源

2013-04-15 Paul

你沒有真正使用'.MAP（）'正確。你可以在那裏使用'.each（）'或'for'循環。 –

@MattBall我知道。從地圖返回一些東西會得到某種數組，然後需要進一步轉換才能得到一個對象。直接想要一個對象... – Paul

不，沒有這樣的jQuery函數給你一個對象而不是數組。不過，自己寫一個很簡單。這只是一個考慮你已經寫了什麼，並在jQuery函數封裝這件事：

$.fn.mapToObject = function (callback) { 
    var output = {}; 

    this.each(function (index, element) { 
     var toAdd = callback.call(this, index, element); 
     output[toAdd.key] = toAdd.value; 
    }); 

    return output; 
};

...然後你可以這樣調用：

var lookup = $('#carMenu>option').mapToObject(function (index, element) { 
    return { 
     key: this.value, 
     value: this.innerHTML 
    }; 
});

http://jsfiddle.net/mattball/nQXL2

來源

2013-04-16 00:10:42

只是想測試表演的樂趣http://jsperf.com/perf-map-functions – plalx

毫不奇怪，「香草'for'循環比jQuery'快.each （）'。 jQuery沒有用於其速度。 –

這是一種友好的方式，說性能至關重要的功能應該始終在香草JS = P – plalx

map對於您想實現的功能並非正確的功能，我不認爲jQuery提供了這樣做的方法。但是，您可以輕鬆創建自己的功能，作爲jQuery插件或不插件。

http://jsfiddle.net/scarsick/qG5Dc/1/（與您的例子）

function makeMap(o, fn) { 
    var map = {}, r; 

    if (typeof o.length === 'number') { 
     for (var i = 0, len = o.length; i < len; i++) { 
      map[(r = fn(i, o[i]))[0]] = r[1]; 
     } 
     return map; 
    } 

    for (var k in o) { 
     if (o.hasOwnProperty(k)) { 
      map[(r = fn(k, o[k]))[0]] = r[1]; 
     } 
    } 

    return map; 
}

隨着array

var map = makeMap([1, 2, 3, 4], function (i, v) { return ['item' + i, v]; }); 
console.log(map); // {item0: 1, item1: 2, item2: 3, item3: 4}

隨着jQuery物體

HTML

<ul> 
    <li>first item</li> 
    <li>second item</li> 
    <li>third item</li> 
</ul>

var map = makeMap($('ul li'), function (i, v) { 
    return ['li' + i, v.innerHTML]; 
}); 

console.log(map); // {li0: "first item", li1: "second item", li2: "third item"}

如果是單純的object

var map = makeMap({prop1: 'test', prop2: 'test'}, function (k, v) { 
    return [k.toUpperCase(), v]; 
}); 
console.log(map); // {PROP1: "test", PROP2: "test"}

來源

2013-04-16 00:26:48 plalx

返回html選擇菜單的查找表

回答

相關問題