70673


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

**現状**

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

[![画像の説明をここに入力](https://i.stack.imgur.com/Mrv3M.png)](https://i.stack.imgur.com/Mrv3M.png)  
  
**実現したいこと**

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

[![画像の説明をここに入力](https://i.stack.imgur.com/55fIK.png)](https://i.stack.imgur.com/55fIK.png)

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

**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>
      <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>
    
[/code]

**JSON**

[code]

    [
      {
        "list": "aA",
        "value": "300",
        "type":"条AA"
      },
      {
        "list": "いB",
        "value": "1000",
        "type":"条BB"
      },
      {
        "list": "うC",
        "value": "2000",
        "type":"条CC"
      }
    ]
    
[/code]


CC BY-SA 4.0
2020-09-24T09:38:55.590
70667
2020-09-25T00:59:57.717
2020-09-25T00:59:57.717
3060
42039
question
javascript jquery html5 json
プルダウンが、うまく表示されません。

[code]

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

主な問題はここで、

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

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

[code]

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

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

[code]

    $('#subtotal2').change(function() {
      $('#subresult2').text($(this).val());
    });
    
[/code]


CC BY-SA 4.0
2020-09-24T14:46:22.023
70673
2020-09-24T15:10:59.683
2020-09-24T15:10:59.683
3475
3475
70667
answer