JSFiddle - React, Tailwind, and code Playground

by Laurens Maneschijn

HTML

<input id="input" type="text" value="-1" dummyattr="-1" data-dummy="-1">
<select id="select1"></select>
<select id="select2"><option>-1</option></select>
<select id="select3"><option value="-1">-1</option></select>

<hr>
Open development console and reload for results.

JavaScript

console.clear();
var $input = $('#input'), input = $input.get(0);

log(input);

log(input.value); // "-1"
log(input.getAttribute('dummyattr'), input.getAttribute('dummyattr') === -1); // "-1"
log(input.getAttribute('data-dummy'), input.getAttribute('data-dummy') === -1); // "-1"
log($input.val()); // "-1"
log($input.attr('dummyattr')); // "-1"
log($input.attr('data-dummy')); // "-1"
log($input.data('dummy')); // -1 number

log($('#select1').val()); // null
log($('#select2').val()); // "-1"
log($('#select3').val()); // "-1"

function log(v){
	// NB: [v] is a hack for chrome development console:
	// without it log(1, "1") is just shown as: 1 1
	// but logging [1, "1"] will show: [1, "1"] 
	// and you can see the different types again.
	console.log(v, [v], typeof v);
}