JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<select>
    <option>a</option>
    <option selected="selected">b</option>
    <option selected="selected">c</option>
</select>

<div id="debug" />

SCSS

:root {
  --color-1: #fa376c;
  --color-2: #ffa780;
  --color-3: #faf8e0;
  --color-4: #9beec1;
}

body {
  background: linear-gradient(90deg, var(--color-1) 0%, var(--color-1) 25%, var(--color-2) 25%, var(--color-2) 50%, var(--color-3) 50%, var(--color-3) 75%, var(--color-4) 75%, var(--color-4) 100%);
}

JavaScript

$(document).ready(function() {
    
    $( 'select' ).attr( 'multiple', true );
    
    $('#debug').append('<hr/>jQuery test:<br/>');
        
    $.each($('option'), function(index, value) {
        $('#debug').append(index + ': ' + $(this).attr('selected') + '<br/>');
    });
                       
    $('#debug').append('<hr/>Javascript test:<br/>');

    var items = document.getElementsByTagName('option'); 
    for (var i = 0; i < items.length; i++) {
        $('#debug').append(i + ': ' + items[i].selected + "<br/>");
    }
});