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

あなたがカテゴリを持って示したデータが、無サブカテゴリ（「お役立ち情報」は「情報」のサブカテゴリーと見なされていない限り）。しかし、とにかく、他の要素が変更されたときにselect要素のオプションを更新するJSを記述することができます。 – nnnnnn

@nnnnnnそれを達成するために、どのように提案？ forループを使用しますか？ – Alessandro

ループを使用できます（yes）。 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複数ドロップダウンボックス

答えて

関連する問題