0

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

[html]

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

[json]

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

1 件の回答 1

1

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

$('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('');
});
3
  • filterというものをかけて、欲しいものを抽出するといいのですね!おしえてくださりありがとうございます^^
    – user42039
    Commented 2020年9月24日 8:31
  • 無事に表示ができました!ありがとうございます! とても助かりました!
    – user42039
    Commented 2020年9月24日 8:32
  • @user42039 もし良ければ回答を承認してくださいませ。ja.stackoverflow.com/help/someone-answers
    – int32_t
    Commented 2020年9月24日 8:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。