JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<script src="http://getfirebug.com/firebug-lite-debug.js"></script>
<script src="http://timmywillison.com/jquery/attrhooks/jquery.js"></script>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option id="option" selected="selected" value="2">2</option>
</select>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option id="option2" selected="selected" value="2">2</option>
</select>
<select>
  <option value="0">0</option>
  <option value="1">1</option>
  <option id="option3" selected="selected" value="2">2</option>
</select>

JavaScript

// You should see 0 in all select elements

// Raw JS
var selectedOpt = document.getElementById('option');
console.log('selected: ', selectedOpt.getAttribute('selected'));
selectedOpt.removeAttribute('selected');
console.log('selected(should be null): ', selectedOpt.getAttribute('selected'));

// With jQuery attrHooks
var $opt = $('#option2');
console.log('option2 selected: ', $opt.attr('selected'));
$opt.removeAttr('selected');
console.log('option2 selected(should be undefined): ', $opt.attr('selected'));

// With jQuery setting to false
$opt = $('#option3');
console.log('option3 selected: ', $opt.attr('selected'));
$opt.attr('selected', false);
console.log('option3 selected: ', $opt.attr('selected'));