javascript - 如何使用与jquery兼容的json格式制作下拉列表
问题描述
我有以下代码可以成功地与 js 一起使用,但不能在 jquery 下(确切地说是 jquery mobile 1.4.5)。让我描述一下:
在 js 文件夹中,我有我放入函数的 json 列表
function JsonList(){
var Food = //4 elements json format
[
{
"name": "Food1",
"Glc": 2,
"Lip": 0.2,
"Prot": 0.5,
"IG": 20
},
{
"name": "Food2",
"Glc": 4,
"Lip": 1.2,
"Prot": 0.7,
"IG": 40
},
{
"name": "Food3",
"Glc": 5,
"Lip": 0.32,
"Prot": 0.76,
"IG": 60
},
{
"name": "food4",
"Glc": 7.5,
"Lip": 1.5,
"Prot": 1.3,
"IG": 80
},
{
"name": "Food5",
"Glc": 10.5,
"Lip": 3.5,
"Prot": 2.3,
"IG": 90
}
];
return Food ;
}
然后验证我拥有的所选项目
function ValFoodList(){
// list food validation
const dropdown = document.getElementById('locality-dropdown');
const defaultOption = document.createElement('option');
defaultOption.text = 'Choose Food';
defaultOption.disabled = true;
dropdown.add(defaultOption);
dropdown.selectedIndex = 0;
// to create a json of selected items
document.getElementById('Gm').addEventListener('click', (event) => {
console.log('click');
const dd = document.getElementById('locality-dropdown');
const result = [];
for(let i = 0; i < dd.options.length; i++) {
const option = dd.options[i];
if(option.selected) {
result.push(JSON.parse(option.value));}
}
console.log("do something with \n", result, GLC);
})
for (let food of JsonList()) {
const option = document.createElement('option');
option.text = food.name;
option.value = JSON.stringify(food);
dropdown.add(option);
}
}
然后在 html 索引中,我有以下内容:
<head><!--jquery initiation-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.js"></script> <!--new line useful?-->
</head>
<body>
<select data-mini="true" data-inline="true" id="locality-dropdown" name="locality" multiple="multiple" size="3" style="background-color:red; position: absolute; top:330px; left:60px;">
</select>
当然,我正在像这样检索索引中的函数
<script src="js/1aFoodList.js"></script>
<script src="js/1bValidationFoodList.js"></script>
- 第一种风格不是可操作的!没有颜色,位置也不是我想要的。
-其次,最重要的是,没有项目或框不下拉显示它们。不用扔 jquery,代码就完美了
这是一张图片来解释;在左边,我在我想要的确切位置有我需要的 js ;在右边,盒子在右下角,不让我展示我的物品
解决方案
我有一个部分答案,
我把data-mini="true" data-inline="true"
小部件选择放在里面。这最小化了框选择......但仍然无法将它放在屏幕上我想要的任何位置
我也放data-native-menu="false"
了,这是第一步,我可以在下拉列表中看到 json 列表
<select data-mini="true" data-inline="true" id="locality-dropdown" name="locality" multiple="multiple" style="background-color:red; position: absolute; top:330px; left:600px;" data-native-menu="false">
</select>
但它不接受我从列表中选择的数据......我只能点击这些项目但console.log中没有显示任何内容(结果)
推荐阅读
- javascript - 如何读取 deno 上的请求数据
- reactjs - 动态 React-native 图片库缩略图
- jquery - 如何通过larvavel中的ajax将div的子元素传递给控制器?
- javascript - Javascript Regex 使用字典中的多个单词从第一人称转换为第二人称
- griddb - 如何解决 GridDB 中未定义的方法“request_uri”
- r - 选择具有增量列值的行
- c# - 当 TaskAwaiter 只是 Task 的包装器时,它的目的是什么?
- node.js - 使用NodeJs异步查询redshift集群
- c# - DateTime.ToString("yyyy.MM.dd-HH_mm_ss") 仅在某些日本笔记本电脑上导致不正确的“年份”组件
- linux - 在资源“包 [ncurses-devel]”上执行操作“安装”时出错