如何使用与jquery兼容的json格式制作下拉列表

如何解决如何使用与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中没有显示任何内容（结果）

如何使用与jquery兼容的json格式制作下拉列表

如何解决如何使用与jquery兼容的json格式制作下拉列表

解决方法

相关推荐