使用 jQuery 在下拉列表中分配和检索多个值 [重复]

Question

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

除了使用“值”属性并使用标记来拆分内容之外，还有其他方法可以将多个值分配到单个 HTML 元素中吗？

我想做这样的事情：

<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