Javascript多個下拉框

-1

有沒有辦法從數組列表中獲取多個下拉字段，而無需將信息硬編碼到HTML中？因此，通過選擇每個類別相關的子類別將下降。該列表看起來像這樣：Javascript多個下拉框

var listData = [ 
    { 
     "title": "Meeting Room", 
     "category": "Forms", 
     "url": "https://www.google.co.uk/" 
    }, 
    { 
     "title": "Book a Car", 
     "category": "Forms", 
     "url": "https://www.google.co.uk/" 
    }, 
    { 
     "title": "Stationery", 
     "category": "Forms", 
     "url": "https://www.google.co.uk/" 
    }, 
    { 
     "title": "Hospitality", 
     "category": "Forms", 
     "url": "https://www.google.co.uk/" 
    }, 
    { 
     "title": "Communications", 
     "category": "News", 
     "url": "https://blogs.office.com/" 
    }, 
    { 
     "title": "Industries", 
     "category": "News", 
     "url": "https://blogs.office.com/" 
    }, 
    { 
     "title": "Policy", 
     "category": "News", 
     "url": "https://blogs.office.com/" 
    }, 
    { 
     "title": "Get started", 
     "category": "Information", 
     "url": "https://support.office.com/" 
    }, 
    { 
     "title": "What do you need", 
     "category": "Useful Information", 
     "url": "https://support.office.com/" 
    }, 
    { 
     "title": "Accessibility features", 
     "category": "Useful Information", 
     "url": "https://support.office.com/" 
    }, 
    { 
     "title": "Videos", 
     "category": "Useful Information", 
     "url": "https://support.office.com/" 
    } 
]

來源

2016-07-28 Alessandro

告訴你有類別的數據，但沒有子類（除非「有用的信息」被認爲是「信息」的一個子類）。但無論如何，是的，您可以編寫JS，在更改其他元素時更新select元素的選項。 – nnnnnn

@nnnnnn爲了實現這一點，任何建議如何？我應該使用for循環嗎？ – Alessandro

你可以使用循環，是的。 http://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript – nnnnnn

以下代碼完成工作。這是香草JS。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dynamic Form</title> 
 
</head> 
 

 
<body> 
 
    <select id="categories" onchange="changeCategory(event)"> </select> 
 
    <select id="title"> </select> 
 
    <select id="url"> </select> 
 
    <script> 
 
     var listData = [{ 
 
      "title": "Meeting Room" 
 
      , "category": "Forms" 
 
      , "url": "https://www.google.co.uk/" 
 
}, { 
 
      "title": "Book a Car" 
 
      , "category": "Forms" 
 
      , "url": "https://www.google.co.uk/" 
 
}, { 
 
      "title": "Stationery" 
 
      , "category": "Forms" 
 
      , "url": "https://www.google.co.uk/" 
 
}, { 
 
      "title": "Hospitality" 
 
      , "category": "Forms" 
 
      , "url": "https://www.google.co.uk/" 
 
}, { 
 
      "title": "Communications" 
 
      , "category": "News" 
 
      , "url": "https://blogs.office.com/" 
 
}, { 
 
      "title": "Industries" 
 
      , "category": "News" 
 
      , "url": "https://blogs.office.com/" 
 
}, { 
 
      "title": "Policy" 
 
      , "category": "News" 
 
      , "url": "https://blogs.office.com/" 
 
}, { 
 
      "title": "Get started" 
 
      , "category": "Information" 
 
      , "url": "https://support.office.com/" 
 
}, { 
 
      "title": "What do you need" 
 
      , "category": "Useful Information" 
 
      , "url": "https://support.office.com/" 
 
}, { 
 
      "title": "Accessibility features" 
 
      , "category": "Useful Information" 
 
      , "url": "https://support.office.com/" 
 
}, { 
 
      "title": "Videos" 
 
      , "category": "Useful Information" 
 
      , "url": "https://support.office.com/" 
 
}]; 
 

 
     function removeOptions(selectbox) { 
 
      var i; 
 
      for (i = selectbox.options.length - 1; i >= 0; i--) { 
 
       selectbox.remove(i); 
 
      } 
 
     } 
 

 
     function changeCategory(event) { 
 
      removeOptions(document.getElementById('title')) 
 
      removeOptions(document.getElementById('url')) 
 
      mySelect1 = document.getElementById('title') 
 
      mySelect2 = document.getElementById('url'); 
 
      listData.forEach(function (item, index) { 
 
       if (item.category == event.target.value) { 
 
        mySelect1.options[mySelect1.options.length] = new Option(item.title, item.title); 
 
        mySelect2.options[mySelect2.options.length] = new Option(item.url, item.url); 
 
       } 
 
      }); 
 
     } 
 
     Array.prototype.contains = function (obj) { 
 
      var i = this.length; 
 
      while (i--) { 
 
       if (this[i] == obj) { 
 
        return true; 
 
       } 
 
      } 
 
      return false; 
 
     } 
 
     var mySelect = document.getElementById('categories'); 
 
     var categories = new Array; 
 
     listData.forEach(function (item, index) { 
 
      if (!categories.contains(item.category)) { 
 
       mySelect.options[mySelect.options.length] = new Option(item.category, item.category); 
 
       categories.push(item.category); 
 
      } 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2016-07-28 08:10:11

非常感謝。這正是我所期待的。 – Alessandro

Javascript多個下拉框

回答

相關問題