json中的Jquery下拉列表值

我想从json中获取下拉值，并将特定id中的值显示在文本字段或div区域中。这是我正在做的代码

这是我创建的一个

我希望这些值来自json，并在文本框中显示与之关联的值。当我更改下拉选项时，文本框中的值也会更改。如何做到这一点？？带一个示例工作流程的JSFIDLE将非常棒

下面是示例json

[
    { 
        "id":1,
        "chains":"Asia",
        "sites":"site 1",
        "visitors":100

    },
    {  
        "id":2,
        "chains":"North America",
        "sites":"site 2",
        "Visitors" :200

    }
]

JS

---

因此，在下拉列表中，基于id，我希望亚洲和北美作为两个选项，然后在文本字段中，第一个文本字段应显示site 1，第二个字段应显示100，反之亦然，以便下一个下拉列表。

如果我没有弄错，您想知道如何从JSON文件中提取此数据。这就是我将如何构造它并从中检索：

JSON:items.JSON

[
  {
    "dept": "Item 1 second",
    "price": 10,
    "value": 1
  },
  {
    "dept": "Item 2 second",
    "price": 20,
    "value": 2
  },
  {
    "dept": "Item 3 second",
    "price": 30,
    "value": 3
  }
]

HTML/JS：

---

演示：

json在哪里？您将如何从json中获取select下拉列表的值？json是数据格式。从何处获取值？当然可以将json对象的值传递给所需的元素，但应该提供json格式以使事情更清楚，json与下拉列表的关系如何？我看不到部门号，也看不到价格字段。没问题。我有点不确定你需要什么，但我很高兴我能做到。你用什么编程语言来获取你的Chains变量？那是树枝吗？根据Chains的来源，你想把它转换成JSON。在PHP中，您可以通过使用Python和Django使用json_encodeIm来实现这一点。因此，这里发生的事情是，我将链存储在数据库中，我使用动态代码{%for chau chains%}{{{chains.name}}{%endfor%}。。。。。为了从数据库中获取链，我将数据库值转换成Json并在前端显示它们。现在，我有{{Chains.name}，这必须在脚本中进行调整，以便它能与来自Json的选项很好地配合，这可能吗？？

[
  {
    "dept": "Item 1 second",
    "price": 10,
    "value": 1
  },
  {
    "dept": "Item 2 second",
    "price": 20,
    "value": 2
  },
  {
    "dept": "Item 3 second",
    "price": 30,
    "value": 3
  }
]

<div>
     <select id="category"></select>
     <input type="text" id="dept-input"></input>
     <input type="text" id="price-input"></input>
</div>
<script>
    $(document).ready(function () {
       $.get('items.json', function (data) {
            $.each(data, function (k, v) {
                $("#category").append('<option value="' + v.value + '" data-price="' + v.price + '">' + v.dept + '</option>');
            });


            $("#category").change(function () {
                var dept_number = $(this).val();
                var price = $(this).find(':selected').data('price');
                $('#dept-input').val(dept_number);
                $('#price-input').val(price);
            });
        })
    });
</script>