分配和使用检索下拉列表中的多个值的jQuery

Question

可能重复：
Adding additional data to select options using jQuery

有没有办法来ASIGN多个值到比使用其他一个HTML元素“价值“atrribute和玩令牌拆分内容？

我愿做这样的事情：

<select id="car_model"> 
    <option value="1" value2="seddan" value3="Volvo">Volvo S60</option> 
    <option value="2" value2="compact" value3="Saab">Saab s93</option> 
    <option value="3" value2="convertible" value3="Mercedes">Mercedes SLK</option> 
    <option value="4" value2="compact" value3="Audi">Audi 3</option> 
</select> 

你如何检索使用jQuery选择的选项的所有值？

Answer 1

有几件事值得思考。你可以，因为你暗示，只需在您的value元素中的所有数据以某种分离的，像这样：

<option value="1,seddan,Volvo">Volvo S60</option> 

另一种选择是使用数据注释：

<option value="1" data-value2="seddan" data-value3="Volvo">Volvo S60</option> 

哪你的选择取决于你将如何使用它。如果您提供关于如何计划使用数据的更多细节，我可以更新此答案。

要在第一种情况下检索数据，这将是这样的：

var values = $('#car_model').val().split(','); 
console.log(values[0]); // prints 1 
console.log(values[1]); // prints "seddan" 
console.log(values[2]); // prints "Volvo" 

而在第二种情况下，它应该是这样的：

console.log($('#car_model').val());   // prints 1 
console.log($('#car_model').data('value2')); // prints "seddan" 
console.log($('#car_model').data('value3')); // prints "Volvo 

Answer 2

您可以分配多个值并通过使用attr方法检索它们..您可以试试这个..

​$('#car_model').on('change', function() { 
    var val = $(this).find('option:selected').attr('value'); 
    var val2 = $(this).find('option:selected').attr('value2'); 
    var val3 = $(this).find('option:selected').attr('value3'); 
    alert('Value - '+ val + ':: Value2 - '+ val2 + ' :: Value3 - '+ val3) 
});​ 

但我认为将值与标识符更有意义，也许用逗号或斜线

检查FIDDLE