Как изменить данные по выпадающему списку опций

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

Проверьте это: -

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')); 
}); 

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/