javascript - 如何更改选择选项下拉列表中的数据

Question

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

数据首先从 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

任何帮助表示赞赏。

Answer 1

检查这个： -

演示

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

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

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

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

演示

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

Answer 2

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

Answer 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/