victorjspinto/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<select id="paises"></select>

	<select id="cidades"></select>

	<button onclick="mostraPaisSelecionado()" > Click aqui !</button>

	<script type="text/javascript" src="jquery-2.1.4.js"></script>

	<script type="text/javascript">

	var paisesJson = 'https://raw.githubusercontent.com/lordviktor/sbac-web/Frontend/json/paises.json?token=AAvviUwJtoKC9LK-pO3S_Gp5ZIULsMSMks5V4kCewA%3D%3D';

	// var paisesJson = 'paises.json'

	$('#paises').loadSelect(paisesJson, {
		labelProperty: 'nome_pais'
	});

	$('#cidades').loadSelect(paisesJson, {
		labelProperty: 'nome_pais'
	});

	function mostraPaisSelecionado() {
		var selecionado = $('#paises').selected();
		console.log(selecionado);
	}
	</script>
</body>
</html>

## jquery-select-utilities.js
(function($) {
	function loadData(url) {
		var deferred = $.Deferred();
		$.ajax({
			url: url,
			dataType: 'json',
			success: deferred.resolve,
      		error: deferred.reject
		});
		return deferred.promise();
	}

	function loadSelect(select, data, options) {

		$.each(data, function(index, value) {
			var option = $('<option>', {
				value: index,
				text: value[options.labelProperty]
			});

			$(select).append(option);
		});
	}

	$.fn.loadSelect = function(url, options) {
		var select = this;
		loadData(url)
			.done(function(data) {
				select.data(data);
				loadSelect(select, data, options);
			});
	};

	$.fn.getSelected = function() {
		return this.data()[this.val()];
	}

	$.fn.setSelected = function(item, identifier) {
		var select = this;
		$.each(this.data(), function(index, value) {
			if(item[identifier] = value[identifier]) {
				select.val(index);
			}
		});
	}
})($);
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	</head>
	<body>
	<select id="paises"></select>

	<select id="cidades"></select>

	<button onclick="mostraPaisSelecionado()" > Click aqui !</button>

	<script type="text/javascript" src="jquery-2.1.4.js"></script>

	<script type="text/javascript">

	var paisesJson = 'https://raw.githubusercontent.com/lordviktor/sbac-web/Frontend/json/paises.json?token=AAvviUwJtoKC9LK-pO3S_Gp5ZIULsMSMks5V4kCewA%3D%3D';

	// var paisesJson = 'paises.json'

	$('#paises').loadSelect(paisesJson, {
	labelProperty: 'nome_pais'
	});

	$('#cidades').loadSelect(paisesJson, {
	labelProperty: 'nome_pais'
	});

	function mostraPaisSelecionado() {
	var selecionado = $('#paises').selected();
	console.log(selecionado);
	}
	</script>
	</body>
	</html>
	(function($) {
	function loadData(url) {
	var deferred = $.Deferred();
	$.ajax({
	url: url,
	dataType: 'json',
	success: deferred.resolve,
	error: deferred.reject
	});
	return deferred.promise();
	}

	function loadSelect(select, data, options) {

	$.each(data, function(index, value) {
	var option = $('<option>', {
	value: index,
	text: value[options.labelProperty]
	});

	$(select).append(option);
	});
	}

	$.fn.loadSelect = function(url, options) {
	var select = this;
	loadData(url)
	.done(function(data) {
	select.data(data);
	loadSelect(select, data, options);
	});
	};

	$.fn.getSelected = function() {
	return this.data()[this.val()];
	}

	$.fn.setSelected = function(item, identifier) {
	var select = this;
	$.each(this.data(), function(index, value) {
	if(item[identifier] = value[identifier]) {
	select.val(index);
	}
	});
	}
	})($);