Question

我们正在制作一个表单，需要将json数据加载到选择框中。

<select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select>

我知道我们需要创建一个for循环，将json数据加载到select中。但我们无法弄清楚如何使用jquery

在选择框中加载json数据

<script> 
var product[];
 product[0] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:4.15};
 product[1] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:4.15};
 product[2] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:6.15};
 product[3] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:33.15};
 product[4] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:12.15};
 product[5] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:19.15};
product[6] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:5333.15};
 product[7] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:16.15};
 product[8] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:44.15};
 product[9] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:21.15};
 product[10] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:20.15};

</script>

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <style type="text/css">
            .tg  {border-collapse:collapse;border-spacing:0;border-color:#aaa;}
            .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#333;background-color:#fff;}
            .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aaa;color:#fff;background-color:#f38630;}
            .tg .tg-yw4l{vertical-align:top}
            </style>
            <table class="tg">
              <tr>
                <th class="tg-yw4l">Productkeuze</th>
                <th class="tg-yw4l">Prijs €</th>
                <th class="tg-yw4l">BTW</th>
                <th class="tg-yw4l">Aantal</th>
                <th class="tg-yw4l">Subtotaal</th>
              </tr>
              <tr>
                <td class="tg-yw4l"><select>
                  <option value="volvo">Volvo</option>
                  <option value="saab">Saab</option>
                  <option value="mercedes">Mercedes</option>
                  <option value="audi">Audi</option>
                </select></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
              </tr>
              <tr>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
              </tr>
              <tr>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
                <td class="tg-yw4l"></td>
              </tr>
            </table>
 <br>
            <table class="tg">
                    <tr>
                      <th class="tg-yw4l">Subtotaal</th>
                      <th class="tg-yw4l">Totaal inclusief btw</th>
                      <th class="tg-yw4l">BTW 21%</th>
                      <th class="tg-yw4l">Btw 6%</th>

                    </tr>
                    <tr>
                      <td class="tg-yw4l"></td>
                      <td class="tg-yw4l"></td>
                      <td class="tg-yw4l"></td>
                      <td class="tg-yw4l"></td>
                    </tr>

                  </table>

<script> 
var product[];
 product[0] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:4.15};
 product[1] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:4.15};
 product[2] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:6.15};
 product[3] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:33.15};
 product[4] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:12.15};
 product[5] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:19.15};
product[6] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:5333.15};
 product[7] = {omschrijving:"Hotdog met sauce", tarief:21, prijs:16.15};
 product[8] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:44.15};
 product[9] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:21.15};
 product[10] = {omschrijving:"Hotdog met sauce", tarief:6, prijs:20.15};

</script>
    <script
    src="https://code.jquery.com/jquery-3.2.1.js"
    integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
    crossorigin="anonymous"></script>
</body>

</html>

Answer 1

var product=[];
 product[0] = {omschrijving:"Hotdog met sauce 1", tarief:6, prijs:4.15};
 product[1] = {omschrijving:"Hotdog met sauce 2", tarief:6, prijs:4.15};
 product[2] = {omschrijving:"Hotdog met sauce 3", tarief:6, prijs:6.15};
 product[3] = {omschrijving:"Hotdog met sauce 4", tarief:6, prijs:33.15};
 product[4] = {omschrijving:"Hotdog met sauce 5", tarief:21, prijs:12.15};
 product[5] = {omschrijving:"Hotdog met sauce 6", tarief:21, prijs:19.15};
 product[6] = {omschrijving:"Hotdog met sauce 7", tarief:21, prijs:5333.15};
 product[7] = {omschrijving:"Hotdog met sauce 8", tarief:21, prijs:16.15};
 product[8] = {omschrijving:"Hotdog met sauce 9", tarief:6, prijs:44.15};
 product[9] = {omschrijving:"Hotdog met sauce 10", tarief:6, prijs:21.15};
 product[10] = {omschrijving:"Hotdog met sauce 11", tarief:6, prijs:20.15};

 $.each(product,function(index,element){
 $("select").append("<option value="+element.tarief+">"+element.omschrijving +"</option>");
 });
 
 $("select").on("change",function(){
var e = document.getElementById("dropdown");

console.log( e.options[e.selectedIndex].text+": "+ e.options[e.selectedIndex].value);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropdown">
</select>

将Json加载到html选择框中

2 个答案: