JSFiddle - React, Tailwind, and code Playground

by tweissin

HTML

<span id="span_id">
    <select id="h273yrjdfhgsfyiruwyiywer" multiple="multiple">
        <option value="1">cleaning</option>
        <option value="2">food-2</option>
        <option value="3">toilet</option>
        <option value="4">baby</option>
        <option value="6">knick-knacks</option>
        <option value="9">junk-2</option>
        <option value="10">cosmetics</option>
    </select>
</span>

<div id="out"></div>

<button pick="1">Pick cleaning</button>
<button pick="2">Pick food-2</button>
<button pick="3">Pick toilet</button>
<button pick="4">Pick baby</button>
<button pick="6">Pick knick-knacks</button>
<button pick="9">Pick junk-2</button>
<button pick="10">Pick cosmetics</button>

JavaScript

function select_option(i) {

    options = $('#span_id').children('select').children('option');
    //alert(options.length); //7
    //alert(options[0]); //[object HTMLOptionElement]
    //alert(options[0].val()); //not a jquery element
    //alert(options[0].value); //1

    //the following does not seem to work since the elements of options are DOM ones not jquery's
    option = options.find("[value='" + i + "']");
    //alert(option.attr("value")); //undefined
    option.attr('selected', 'selected');

}

function select_option_new(i) {
    $("#span_id select").val(i);
}

$(function() {
    
    //$("button").click(function(e) {
    //    $("#out").html($(e).html());
    //});
    
    $("button").click(function() {
        $("#out").text("clicked");     
        console.log($(this).attr("pick"));
        select_option_new($(this).attr("pick"));
    });
});