1. ホーム
  2. 質問と答え
  3. Jsonをhtml選択ボックスにロード

Jsonをhtml選択ボックスにロード

2017-10-12 11 views
0

jsonデータを選択ボックスにロードする必要があるフォームを作成しています。Jsonをhtml選択ボックスにロード

<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の

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

enter image description here

<!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>

出典

2017-10-12 Anonymous

+0

を使用して選択ボックスでJSONデータをロードする方法を見つけ出すことはできません明確にしてください：あなたがロードしたいですあなたが変更するときにテーブルに価格と付加価値税eドロップダウンの選択？選択には4つの製品しかなく、アレイには10の製品しかないので、それらのどれもが例ではありません。 "ボルボ"。私は2つの間のリンクが表示されません。 – ZorgoZ

答えて

0 

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>

出典

2017-10-12 08:14:25

0 
var sel = $("select"); // if you have 1 select, if more - use selector by id/class/attr 
var options = ""; 
$.each(product, function(idx, val){ 
    options = options + '<option value="' + idx + '">' + val + '</option>'; 
}) 
$(sel).html(options);

出典

2017-10-12 08:16:45 diavolic

関連する問題

 関連する問題