JSFiddle - React, Tailwind, and code Playground

by scriptwerx

HTML

<select id="starMe">
    <option disabled selected>Please select</option>
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>

JavaScript

var starMe = document.getElementById('starMe');
starMe.addEventListener('change', function() {
        
    for (var i = 0, len = this.options.length, option; i < len; i ++) {
        
        option = this.options[i];
        
        if (i === this.selectedIndex) {
            option.setAttribute('data-text', option.text);
            option.text = '*';
        }
        else {
            option.text = option.getAttribute('data-text') || option.text;   
        }
    }
 
});

starMe.addEventListener('mousedown', function() {
    
   for (var i = 0, len = this.options.length, option; i < len; i ++) {
       option = this.options[i];
       option.text = option.getAttribute('data-text') || option.text;
    }
    
});