JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<select id="chooser-1">
    <option value="1">foo</option>
    <option value="2" class="x">bar</option>
    <option value="3" class="y">baz</option>
</select>

<select id="chooser-2">
    <option value="1">foo</option>
    <option value="2" class="x">bar</option>
    <option value="3" class="y">baz</option>
</select>

JavaScript

var $select1 = $('#chooser-1'),
    $x1 = $select1.find('.x'),
    $y1 = $select1.find('.y'),
    $select2 = $('#chooser-2'),
    $x2 = $select2.find('.x');

$x1.attr("selected", "selected");
console.log( 'x1: ', $x1.attr('selected'), $x1.prop('selected') );
$y1.removeAttr('selected');
console.log( 'x1: ', $x1.attr('selected'), $x1.prop('selected') );

$x2.attr("selected", "selected");
console.log( 'x2: ', $x2.attr('selected'), $x2.prop('selected') );