JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

JavaScript

// Create option with jQuery innerHTML on a fragment,
// attach to jQuery prototype, then extract from jQuery
var option = $('<option value=""></option>')[0];

// Set selected using setAttribute (which is what attr does)
jQuery(option).attr('selected', true);

// Check selected property (should be true, but is false in Opera)
console.log('fails: ', option.selected);

// Other cases that do work in Opera
option = $('<option></option>')[0];
var option2 = document.createElement('option'),
    option3 = $('<select><option value=""></option></select>').find('option')[0];

// Reproduce what jQuery does to create the element, but without then merging with jQuery
var fragment = document.createDocumentFragment(),
    div = document.createElement('div'),
    select = '<select multiple="multiple"></select>',
    html = '<option value=""></option>',
    option4;

div.innerHTML = select;
div = div.lastChild;
div.innerHTML = html;
fragment.appendChild = div.childNodes;
option4 = fragment.childNodes[0];

jQuery(option).attr('selected', true);
jQuery(option2).attr('selected', true);
jQuery(option3).attr('selected', true);
jQuery(option4).attr('selected', true);

console.log('option: ', option.selected);
console.log('option2: ', option.selected);
console.log('option3: ', option.selected);
console.log('option4: ', option.selected);