70663


選択した項目の、オブジェクトのプロパティの２つめのデータ(数字)を変数subvalueに代入して、  
出力したいのですが、$(x.list)にしてみたり色々しているのですが、うまくできません。

[html]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <title></title>
    
    </head>
    
    <body>
      
      <input type="text" id="wrap" list="list">
    
    
        <script type="text/javascript">
          $.getJSON("data1.json", function(sample_list){
     //         var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}">${x.value}</option>`)));
              var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}"</option>`)));
     
      $("input#wrap").append(d);
                
              $('input').change(function() {
                var subvalue = $(this).val();
                $("#subresult1").text(subvalue)
              });
    
          });
        </script>
      <p id="subresult1">ここに表示</p>
      
      
    
    </body>
    </html>
    
[/code]

[json]

[code]

    [
      {
        "list": "あA",
        "value": "300",
        "type":"条件A"
      },
      {
        "list": "いB",
        "value": "1000",
        "type":"条件B"
      },
      {
        "list": "うC",
        "value": "2000",
        "type":"条件C"
      }
    ]
    
[/code]


CC BY-SA 4.0
2020-09-24T06:25:43.150
70661
2020-09-24T08:32:14.743
42039
question
javascript html5 json
選択した項目のjsonプロパティのvalueの値を変数に代入し表示したい。


`input`要素の`change`イベントは、参照している`datalist`要素のどの`option`要素が選ばれたかという情報はいっさい持っていません。`change`
イベントハンドラ内で`sample_list`を再検索して欲しい値を取り出す必要があります。

[code]

    $('input').change(function() {
      const value = $(this).val();
      const candidates = sample_list.filter(
          item => item.list == value);
      if (candidates.length > 0)
        $("#subresult1").text(candidates[0].value);
      else
        $("#subresult1").text('');
    });
    
[/code]


CC BY-SA 4.0
2020-09-24T07:48:35.037
70663
2020-09-24T07:48:35.037
3475
70661
answer