如何使用与jquery兼容的json格式制作下拉列表 [英] how to make a dropdown list using json format compatible with jquery
问题描述
我有以下代码可以成功地与js一起使用，但不在jquery下(确切地说是jquery mobile 1.4.5). 让我来描述一下:
I have the following codes that works successfully with js but don't under jquery (precisely jquery mobile 1.4.5). let me describe it :
在js文件夹中，我有一个放入函数的json列表
In js folder I have json list that I put into a function
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 ;
}
然后验证我拥有的所选项目
Then to validate the selected items I have
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索引中，我喜欢以下内容:
Then in the html index, I have like following:
<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>
当然我正在检索索引中的函数 像这样
of course I am retrieving the functions in the index like this
<script src="js/1aFoodList.js"></script>
<script src="js/1bValidationFoodList.js"></script>
-第一种样式不可操作！没有颜色，位置也不是我想要的位置.
-First style is not operant! there is no color, and the position is not where I would like it.
-第二，最重要的是，没有项目，或者没有下拉框显示它们.无需抛出jQuery，代码可以完美运行
-Second, the most important, there is no items or the box doesn't dropdown to show them. Without going threw jquery, the code works perfect
这是一张图片来解释；在左侧，我在JS中的所需位置完全正确.在右侧，该框本身位于右下角，而我不能显示我的物品
here is a pic to explain ; on the left, I have what I need in js in the exact position I want ; on the right, the box is in the right bottom corner by itself without let me display my items
推荐答案
我有部分答案，
我将data-mini="true" data-inline="true"放在小部件选择中.这样可以最小化框的选择...但是仍然无法将其放在屏幕上的任何位置
I put data-mini="true" data-inline="true" inside the widget select. This minimize the box selection ... but still cannot put it wherever I want on the screen
我也放了data-native-menu="false"，这是第一步，我可以在下拉列表中看到json列表
I have also put data-native-menu="false" and this is a first step where I can see the json list in the dropdown list
<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(结果)中没有任何显示
But it doesn't take the data I chose from the list... I can only click on the items but nothing is shown in the console.log (result)
这篇关于如何使用与jquery兼容的json格式制作下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
