- The control should use Bootstrap to function properly. It needs jQuery library for Javascript bit.
- To turn on hiding the selected option, set the data-hide-selectedoption HTML 5 data attribute to "true".
Random selecting HTML SELECT control
<!-- Bootstrap docs: https://getbootstrap.com/docs --> <div class="container"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><img style="cursor:pointer" title="Choose random value" alt="Choose random value" width="24" height="24" src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-shuffle-512.png" /></span> </div> <select data-hide-selectedoption="true" disabled id="ComboBoxIceCreamBar" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> <option selected hidden>Choose icecream</option> <option value="Vanilla">Vanilla</option> <option value="Strawberry">Strawberry</option> <option value="Pineapple">Pineapple</option> <option value="Mint chocolate">Mint chocolate</option> <option value="Mango ice cream">Mango ice cream</option> <option value="Rasperry Ripple">Raspberry Ripple</option> <option value="Pistachio">Pistachio</option> <option value="Cookie dough">Cookie dough</option> <option value="Lemon">Lemon</option> <option value="Mango">Mango</option> </select> <!-- <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> --> </div> </div> <script type="text/javascript"> $("#basic-addon1").on("click", function() { var selectcontrol = $(this).parent().siblings('select:first'); var optionslength = selectcontrol.children('option').length; var randomIndex = Math.max(1, parseInt(Math.random() * optionslength)); var optionElementToSelect = selectcontrol.children('option')[randomIndex]; optionElementToSelect.selected = true; //debugger if (selectcontrol.data('hide-selectedoption')){ optionElementToSelect.innerText = 'Selected value hidden.'; } console.log("Selected ice cream: " + selectcontrol.val()); }); </script>