javascript - 我想从选项中获得不同的值

Question

我有一个带有价格、型号和品牌的对象汽车。我想在选择中显示这个。

我有一个看起来像这样的选择：

<select>
    <option>Ford Mustang 30000</option>
    <option>Alfa Romeo giuletta 25000</option>
</select>

我该怎么做才能获得所选选项的价格。所以当我选择选项时，我可以获得选项的每个细节（品牌、型号、价格）

var brand = ...
var model = ...
var price = ...

我尝试使用 JSONObject 并覆盖 toString() 方法，但是我无法将其转换回 JSONObject ..

谢谢您的帮助

Answer 1

您可以使用 html5data-属性来存储选项本身的信息，然后使用 js 访问它。

<select id="cars">
<option data-brand='Ford' data-model='Mustang' data-price='30000'>Ford Mustang 30000</option>
</select>

在js中

var $selected_car = $('#cars :selected'); 
var brand = $selected_car.data('brand');
var model = $selected_car.data('model');
var price = $selected_car.data('price');

Answer 2

如果您使用的是 HTML5，则可以使用data属性。例如：

<select>
    <option value="30000" data-brand="Ford" data-model="Mustang">Ford Mustang 30000</option>
    <option value="25000" data-brand="Alfa Romeo" data-model="Giulietta">Alfa Romeo giuletta 25000</option>
</select>

然后在代码中你可以选择这些：

$("select").change(function() {
    var $select = $(this);
    var $option = $("option:selected", $select)

    var brand = $option.data("brand");
    var model = $option.data("model");
    var price = $select.val();

    // do your thing...
});

Answer 3

如果您不使用 html5，则可以在每个选项的 value 属性中编码所有数据。

<option value="{'brand':'Ford','model':'Mustang','price':'$30,000'}">Ford Mustang</option>

$("select").change(function() {
    var $select = $(this);
    var $option = $("option:selected", $select)
    var data = jQuery.parseJSON($option.value);

    var brand = data.brand;
    var model = data.model;
    var price = data.price;

    // do your thing...
});