Display elements with id matching select value and hide others [closed]

by

Pure JavaScript. There is no need of using IDs for every div element. Better use data attribute.

document.getElementById('dataSelect').addEventListener('change', function() {
  var nodes = document.querySelectorAll("div[data-amount]");
  var selected = this.options[this.selectedIndex];
  if (selected.value == "any") {
    for (var i = 0; i < nodes.length; i++) {
      nodes[i].style.display = 'block';
    }
  } else {
    for (var i = 0; i < nodes.length; i++) {
      nodes[i].style.display = (nodes[i].dataset.amount == selected.value) ? 'block' : 'none';
    }
  }

});
<select name="dataSelect" id="dataSelect" class="enter-drop" required>
<option value="" disabled>Data Amount</option>
<option value="any" selected>Any</option>
<option value="30">30GB</option>
<option value="12">12GB</option>
<option value="8">8GB</option>
</select>

<div data-amount="30" class="deal">30GB of Data</div>
<div data-amount="12" class="deal">12GB of Data</div>
<div data-amount="8" class="deal">8GB of Data</div>

More Related Contents:

  1. How to apply !important using .css()?
  2. How to load up CSS files using Javascript?
  3. Determine if an HTML element’s content overflows
  4. Page content is loaded with JavaScript and Jsoup doesn’t see it
  5. Render HTML string as real HTML in a React component
  6. How do I simulate a hover with a touch in touch enabled browsers?
  7. Change link color of the current page with CSS
  8. How to open a PDF file in an ?
  9. How can I validate an email address in JavaScript?
  10. Is there a way to make text unselectable on an HTML page? [duplicate]
  11. Capture iframe load complete event
  12. How to use external “.js” files
  13. What is the best way to parse html in google apps script
  14. How do I escape quotes in HTML attribute values?
  15. Why write when the mime type is set by the server?
  16. Getting mouse location in canvas [duplicate]
  17. How to export html table to excel using javascript
  18. HTML5 video not streaming and taking 90 seconds to load
  19. Selecting multiple from an html select element without using ctrl key
  20. Call two functions from same onclick [duplicate]
  21. Anchor tag download attribute not working :Bug in Chrome 35.0.1916.114
  22. How to add and remove classes in Javascript without jQuery
  23. What are some methods to debug Javascript inside of a UIWebView?
  24. Preloading images in HTML
  25. allowing only alphabets in text box using java script
  26. HTML5 input required, scroll to input with fixed navbar on submit
  27. refresh div with jquery
  28. focus on next tabindex of HTML element onEnter keypress by JQuery
  29. Clear localStorage on tab/browser close but not on refresh
  30. Find and replace nth occurrence of [bracketed] expression in string

Leave a Comment