Skip to content

Instantly share code, notes, and snippets.

@djalmaaraujo

djalmaaraujo/tadashi.html

Created February 5, 2013 19:28
Show Gist options
  • Save djalmaaraujo/4716932 to your computer and use it in GitHub Desktop.
Save djalmaaraujo/4716932 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tadashi.html
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Tadashi gostosinho</title>
<style type="text/css">
.aui-field-select {
float: left;
margin: 0 30px 0 0;
}
.row {
clear: both;
min-height: 40px;
padding: 20px 0;
border-bottom: 5px solid red;
}
</style>
</head>
<body>
<div id="global_div">
<div class="row">
<select name="selectY" id="X1" class="aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
<select name="selectY" id="X1" class="depends aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
<select name="selectY" id="X1" class="depends aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
</div>
<div class="row">
<select name="selectY" id="X1" class="aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
<select name="selectY" id="X1" class="depends aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
<select name="selectY" id="X1" class="depends aui-field-select">
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
<option value="value1">Option1</option>
</select>
</div>
</div>
<button id="add">Add</button>
<button id="rem">Rem</button>
<script src="http://cdn.alloyui.com/2.0.0pr1/aui/aui-min.js"></script>
<script type="text/javascript">
var options = [
{id: 1, name: "MUDEI"},
{id: 2, name: "Tadashi"},
{id: 3, name: "Djalma"},
{id: 4, name: "Tulio"},
{id: 5, name: "Antonio"}
];
YUI().use('aui-carousel', function(Y) {
// O DELEGATE FUNCIONA COMO O .ON() SO QUE ELE APLICA O EVENTO NO PAI, E FAZ UM BUBBLE PARA O FILHO, ASSIM, NAO IPORTA SE O SELECT EH NOVO OU NAO NA DOM, SEMPRE VAI PEGAR O BIND DO EVENTO CHANGE
Y.one('#global_div').delegate('change', function (event) {
var nextDependentSelect = event.currentTarget.next('.depends');
if (nextDependentSelect) {
var selectOptions = [];
Y.each(
options,
function(item, index, collection) {
var key = item.id;
var value = item.name;
selectOptions.push('<option value="' + key + '">' + value + '</option>');
}
);
nextDependentSelect.set('innerHTML', selectOptions);
}
}, '.aui-field-select');
// aqui nao tem haver com o ex, só simulando o repeat
Y.one("#add").on('click', function () {
var newRow = Y.one('.row').cloneNode(true);
newRow.set('id', newRow._yuid);
Y.one('#global_div').append(newRow);
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment