プルダウンメニューがうまく表示されません。
現状
プルダウンをクリックしても開きません。
↓クリックすると、以下のように表示するようにしたい。(テキスト入力はなし)
なお、[ここに表示] というテキスト部分は、プルダウンの項目を選択したら対応する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"
}
]