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

您可以使用html5 data-属性来存储选项本身的信息，然后使用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...
});

我想从选项获得不同的价值观

3 个答案: