0

プルダウンメニューがうまく表示されません。

現状

プルダウンをクリックしても開きません。

画像の説明をここに入力
 
実現したいこと

↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし)

画像の説明をここに入力

なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応するJSONのプロパティの値を表示します。(数字)

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>
  <select id="subtotal2"></select>
    <script type="text/javascript">
    
      $.getJSON("data2.json", function(sample_list){

        //         var d=$('<datalist id="list">').append(sample_list.map(x=>$(`<option value="${x.list}">${x.value}</option>`)));
                        var d=$("subtotal2").append(sample_list.map(x=>$(`<option value="${x.value}"</option>`)));
                       $("#subtotal2").append(d);      

                     $('#subtotal2').change(function() {
                          const value = $(this).val();
                          const candidates = sample_list.filter(
                              item => item.subtotal2 == value);
                          if (candidates.length > 0){
                            $("#subresult2").text(candidates[0].value);
                           
                            window.Calc2=candidates[0].value;
                            
                          }else{
                            $("#subresult2").text('');
                          }
              });
         
      
      });
    </script>
  <p id="subresult2">ここに表示</p>

</body>
</html>

JSON

[
  {
    "list": "aA",
    "value": "300",
    "type":"条AA"
  },
  {
    "list": "いB",
    "value": "1000",
    "type":"条BB"
  },
  {
    "list": "うC",
    "value": "2000",
    "type":"条CC"
  }
]
2
  • <select>の初期状態は未選択である必要がありますか?
    – int32_t
    2020年9月24日 13:41
  • お返事ありがとうございます。いいえ、入っていても構いません。
    – user42039
    2020年9月24日 13:46

1 件の回答 1

1
var d=$("subtotal2").append(sample_list.map(
    x=>$(`<option value="${x.value}"</option>`)));
$("#subtotal2").append(d);      

主な問題はここで、

  • 1行目で <subtotal2> という要素を参照しているが、そのような要素は文書中にない。
  • 生成している<option>のラベルが空文字列になっているので、メニュー内では何も表示されない。

次のようにすればよいでしょう。

$("#subtotal2").append(sample_list.map(
    x => $(`<option value="${x.value}">${x.list}</option>`)));

また、select 要素はどのoptionが選択されたか知っていますし、ラベルと値は分離できるので、changeイベントハンドラは以下でよいです。

$('#subtotal2').change(function() {
  $('#subresult2').text($(this).val());
});
3
  • ありがとうございます!無事選択できるようになりました!ただ、コンソールを見ると、以下のようなエラーが出ます。ネットで調べたのですが、よくわかりません^^;Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at k.fn.init.val (jquery.min.js:2) at HTMLSelectElement.<anonymous> (json2.html:25) at HTMLSelectElement.dispatch (jquery.min.js:2) at HTMLSelectElement.v.handle (jquery.min.js:2) val @ jquery.min.js:2 (anonymous) @ json2.html:25 dispatch @ jquery.min.js:2 v.handle @ jquery.min.js:2
    – user42039
    2020年9月24日 15:03
  • ああ、ごめんなさい、change() に指定するのがアロー関数だと動かないですね。元のコードのまま「$('#subtotal2').change(function() { ...」としてください。回答も修正しておきます。
    – int32_t
    2020年9月24日 15:10
  • 無事に数値とコンソールのエラーが消えました!かなり、奥が深いですね・・・パンクしそうです^^;ありがとうございました!
    – user42039
    2020年9月24日 15:13

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

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