JSFiddle - React, Tailwind, and code Playground

HTML

<form id="selecttest">
    <label for="fruit">Please select at least two fruits</label><br>
        <select id="fruit" name="fruit" size="5">
            <option data-id="1" data-name="norman">Banana</option>
            <option data-id="2" data-name="james">Apple</option>
            <option data-id="3" data-name="lars">Peach</option>
            <option data-id="4" data-name="john">Turtle</option>
        </select>
        <input type="submit" id="selectForm" value="Validate Selecttests">
    </form>

JavaScript

$('#selectForm').click(function(e) {
        e.preventDefault();

        var action = $('#fruit option:selected').attr('data-id');
        var type = $('#fruit option:selected').attr('data-name');
    
        console.log(action+' '+type);
    });