地圖JSON條目來選擇選項

我有一個簡單的類Pet：地圖JSON條目來選擇選項

public class Pet{ 
    private name; 
    private age; 
}

和HashMap<String,<Pet>> - 的String值是一個孩子的名字。在HTML文件中我得到此HashMap中JSON，例如：

{"Jon":[{"name":"dog","age":5},{"name":"cat","age":4},{"name":"parrot","age":3}],"Paul":[{"name":"parrot","age":3}]}

有兩個select在我的HTML，第一個代表孩子的名字，第二個是寵物：

 <select id="Child"> 
      <option value="Jon">Jon</option> 
      <option value="Paul">Paul</option> 
     </select> 
     <select id="Pet"> 
     </select>

我想選擇child's name，然後把第二個select名爲Pets這個孩子。我知道不可能加載所有數據，然後使用'hide'和'show'之類的東西。那麼decode我的Json對某些數組的最佳方式是什麼，然後動態添加它以清除select？

@Update 我的html：

<html> 
    <head> 
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script> 
// Parse the JSON string into a proper object 
     let data = JSON.parse('{"Jon":[{"name":"dog","age":5},{"name":"cat","age":4},{"name":"parrot","age":3}],"Paul":[{"name":"parrot","age":3}]}'); 

     // References to both SELECT elements 
     let child = document.getElementById('Child'); 
     let pet = document.getElementById('Pet'); 

     // An event listener to handle changes to the child-select 
     child.addEventListener('change', function() { 
      // Attempt to look-up the selected value in our JSON 
      let option = data[this.value]; 

      // Proceed only if a match (with depth) is found 
      if (option && option.length) { 
       // Create a fragment, and add option elements 
       let fragment = document.createDocumentFragment(); 

       option.forEach(function (item) { 
        let entry = document.createElement("option"); 
        entry.value = item.name; 
        entry.textContent = item.name; 
        fragment.appendChild(entry); 
       }); 

       // Clear the pet-select of any values, re-populate 
       pet.innerHTML = ''; 
       pet.appendChild(fragment); 
      } 
     }); 
    </script> 
    </head> 

    <body> 
     <select id="Child"> 
      <option value="Jon">Jon</option> 
      <option value="Paul">Paul</option> 
     </select id="Pet"> 
     <select id="Pet"> 
     </select>  
    </body> 
</html>

來源

2017-02-26 littlewombat

所以，如果'＃Child'存在於你的JSON文件中，你希望相應對象的'name'屬性被列爲'＃Pet'的值？ – Sampson

這正是我想要 – littlewombat

我沒有測試以下，但它可能工作書面。見行內註釋爲進一步的解釋：

// Only proceed once the DOM has been constructed 
document.addEventListener('DOMContentLoaded', function() { 

    // Parse the JSON string into a proper object 
    let data = JSON.parse('{"Jon":[...],"Paul":[...]}'); 

    // References to both SELECT elements 
    let child = document.getElementById('Child'); 
    let pet = document.getElementById('Pet'); 

    // An event listener to handle changes to the child-select 
    if (child && pet) { 
     child.addEventListener('change', function() { 
      // Attempt to look-up the selected value in our JSON 
      let option = data[this.value]; 

      // Proceed only if a match (with depth) is found 
      if (option && option.length) { 
       // Create a fragment, and add option elements 
       let fragment = document.createDocumentFragment(); 

       option.forEach(function (item) { 
        let entry = document.createElement("option"); 
        entry.value = item.name; 
        entry.textContent = item.name; 
        fragment.appendChild(entry); 
       }); 

       // Clear the pet-select of any values, re-populate 
       pet.innerHTML = ''; 
       pet.appendChild(fragment); 
      } 
     }); 
    } 

});

來源

2017-02-26 19:22:41 Sampson

可以檢查我的html是否正確？ – littlewombat

@lwpwombat您的JavaScripts在「」甚至被創建之前運行。所以對'getElementById'的調用無法找到元素。請將'

，如果你要連結的寵物選擇他們的所有者，您可以使用JQuery的鏈式插件

var values = { 
 
     "Jon": [{"name": "dog", "age": 5}, {"name": "cat", "age": 4}, {"name": "parrot", "age": 3}], 
 
     "Paul": [{"name": "parrot", "age": 3}] 
 
    } 
 
    $(function() { 
 
     for (var key in values) { 
 
      for (var i = 0; i < values[key].length; i++) { 
 
       $('#Pet').append($('<option>', 
 
        { 
 
         value: values[key][i].name, 
 
         text: values[key][i].name, 
 
         class: key 
 
        })); 
 
      } 
 
     } 
 
     $("#Pet").chained("#Child"); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-chained/1.0.0/jquery.chained.js"></script> 
 
    <select id="Child"> 
 
    <option value="Jon">Jon</option> 
 
    <option value="Paul">Paul</option> 
 
    </select> 
 
    <select id="Pet"> 
 
    </select>

來源

2017-02-26 20:23:05 radtelbi

相關問題

地圖JSON條目來選擇選項

回答

相關問題