Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <title>SELECT option onchange</title>
- <style>
- #fruits {
- width: 350px;
- text-align: center;
- }
- select {
- color: red;
- font-size: 40px;
- letter-spacing: 5px;
- }
- #txt {
- text-transform: capitalize;
- }
- button:nth-child(1) {
- margin: 5px;
- float: right;
- }
- .buttonContainer {
- width: 100px;
- float: right;
- }
- </style>
- <body>
- <select name="fruits" id="fruits">
- <option disabled selected value>Select</option>
- <option value="orange">Orange</option>
- <option value="banana">Banana</option>
- <option value="carrot">Carrot</option>
- <option value="watermelon">Watermelon</option>
- <option value="lime">Lime</option>
- </select>
- <div class='buttonContainer'>
- <button onclick='getOptions()'>Get options</button>
- <button onclick='clearOptions()'>Clear options</button>
- </div>
- <p id='txt'></p>
- <script>
- x = [];
- frut = document.getElementsByName('fruits');
- window.addEventListener('change', function() {
- for (i = 0; i < frut.length; i++) {
- x.push(frut[i].value);
- x.sort();
- }
- });
- function getOptions() {
- txt.innerHTML = x;
- }
- function clearOptions() {
- txt.innerHTML = '';
- return x = [];
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement