Javascript mehrere Dropdown-Box

-1

Gibt es eine Möglichkeit, eine multiple Dropdown-Feld aus einer Liste von Arrays zu erhalten, ohne die Informationen in den HTML-Code fest codieren zu müssen? So dass bei der Auswahl jeder Kategorie die relevante Unterkategorie abfällt. Die Liste sieht wie folgt aus:Javascript mehrere Dropdown-Box

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/" 
    } 
]

Quelle

2016-07-28 Alessandro

Die Daten, die Sie Kategorien anzeigen, aber keine Unterkategorien (es sei denn, „Nützliche Informationen“ ist eine Unterkategorie von „Information“ betrachtet). Aber wie auch immer, ja, Sie können JS schreiben, das die Optionen eines ausgewählten Elements aktualisiert, wenn ein anderes Element geändert wird. – nnnnnn

@nnnnnn um das zu erreichen, jeder Vorschlag wie? soll ich eine for-Schleife benutzen? – Alessandro

Sie können eine Schleife verwenden, ja. http://StackOverflow.com/Questions/8674618/Adding-Option-to-select-with-javascript – nnnnnn

Der folgende Code macht die Arbeit. Es ist Vanille 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>

Quelle

2016-07-28 08:10:11

Vielen Dank. Es ist genau das, wonach ich gesucht habe. – Alessandro

Antwort

Verwandte Themen