how to make a dropdown list using json format compatible with jquery

问题

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 :

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);
    }
    }

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.

-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

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

回答1:

I have a partial answer,

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

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>

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)

来源：https://stackoverflow.com/questions/65694132/how-to-make-a-dropdown-list-using-json-format-compatible-with-jquery

标签

javascript

jquery

json

jquery-mobile

drop-down-menu