JSFiddle - React, Tailwind, and code Playground

by Shrikrishna Gupta

HTML

<select id="target">
    <option value="1">OPTION 1</option>
    <option value="2">OPTION 2</option>
    <option value="3">OPTION 3</option>
    <option value="4">OPTION 4</option>
    <option value="5">OPTION 5</option>
</select>

<button id="btn" class="btn">Select "Option 2"</button>
<button id="btn_second" class="btn">Select 4<sup>th</sup> option</button>
<button id="btn_clr" class="btn">Clear Select</button>

CSS

.btn {
    height: 30px;
    line-height: 25px;
    background-color: black;
    color: #fff;
    border: none;
}

.btn:hover {
    background-color: red;
}

JavaScript

// set option by value - select "option 2"
$('#btn').click(function (){
    $('#target').val('2');
});

// set option by index - select fourth option
$('#btn_second').click(function (){
    $('#target').val($('#target option').eq(3).text()));
});

// clear selection
$('#btn_clr').click(function (){
    $('#target').val([]);
});