如何更改选择选项下拉列表中的数据答案

【问题标题】：How to change data on select option dropdown如何更改选择选项下拉列表中的数据
【发布时间】：2013-04-29 04:00:54
【问题描述】：

需要一些帮助来更改所选选项的数据。

数据首先从 JSON 结果填充到下拉选项列表中，在同一个 JSON 中，第二个数据是在从下拉列表中选择选项时需要更改的。

我希望操作系统在选择商店时更改价格。

这是我的 javascript 代码：

    $(function() {
    var pricestore = [{"product_id":"1","store_id":"1","price":"120.00","sequence":"0","id":"1","parent_id":"0","name":"Store 1","email":"store1@store1.com"},{"product_id":"1","store_id":"2","price":"140.00","sequence":"0","id":"2","parent_id":"0","name":"Store 2","email":"store2@store2.com"}];
    $.each(pricestore, function(i, option) {
        $('#sel').append($('<option/>').attr("value", option.id).text(option.name));    
    }),
    //Trying to populate the price on div id
    $$('#price-store').each(function(el) {
        el.innerHTML = pricestore;
        });
})

这是获取数据的 HTML

<select id="sel"></select>
<div id="price-store"></div>

这里也是jsfiddle上的一个例子

http://jsfiddle.net/A386B

感谢任何帮助。

【问题讨论】：

标签： javascript json

【解决方案1】：

检查这个：-

Demo

根据我从您的问题中了解到的情况，您需要在下拉值更改时在 div 中显示价格。您可以使用以下方法。您需要在dropdown 上使用更改事件。

此方法使用所选选项元素的Index() 并从JSON 检索相应的记录。

 $('#sel').change(function () {
        $('#price-store').text(
                pricestore[$('option:selected', this).index()].price);
    });

另一种方法是在选项元素上使用data-attributes 来存储相应的价格并在下拉值更改时检索它。

Demo

 $('#sel').append($('<option>',
                       {
                           "value" :option.id,
                           "data-price" :option.price
                       }).text(option.name));
}),
$('#sel').change(function () {
    $('#price-store').text($('option:selected', this).data('price'));
});

【讨论】：

感谢 PSL，这是我想要的 :)。
快速提问，我怎样才能让价格始终保持较低的价值？非常感谢。
@Dario 抱歉，我无法清楚地理解您的问题。你能举个例子吗...
例如，如果我有 Price: 50, 20, 30 - Store: 1, 2, 3，第一个选择将是 50，问题是是否可以始终将较低的值放在首位，在这种情况下 20。谢谢
所以基本上你想根据最低价格对你的 json 进行排序吗？

【解决方案2】：

您使用$$ 而不是$ 来选择您的div。 $('#price-store')
传递给.each() 方法的函数的第二个参数是不是第一个的元素。 function(i, el) {
你为什么用.each() 做一个div？
您必须格式化 pricestore 中的数据才能将其显示在 div 中，否则您将得到的只是 [Object object],[Object object]。

【讨论】：

【解决方案3】：

或者这个：

<div id="price-store"></div
<form>
    <select id="price">
        <option>120</option>
        <option>140</option>
        <option>160</option>
    </select>
</form>

和：

$('#price').change(function() {
 $('#price-store').text($('#price').find(":selected").text());
});

http://jsfiddle.net/XcSZL/8/

【讨论】：