Clash Royale CLAN TAG

javascript - duplicate multi-level drop-downs on button click and return values

Here is the setting. I have two drop-downs adjacent to each other on my initial page. The values in the 2nd drop down depend on the value from the 1st drop down. This works fine.

I have an Add button which duplicates the row of drop-downs i.e. adds 2 adjacent drop-downs below the previous ones.

The addition of drop-downs work fine. However if I have a value selected in my initial drop-down and there is a respective value loaded in 2nd drop-down(dependent on the value from first), that same value is duplicated in the newly added drop-down.

Moreover, the newly added drop-downs are not responsive i.e. a change in left drop-down doesnt change the value in the right drop-down. (The responsiveness is only in the initially added drop-downs)

Maybe I havent used the best javascript practices, forgive me for I am very new at this.

Any feedback is welcomed. Thank you.

Here is the code:

<div class="container">
<table id="myTable">
<tr id="initialRow" class="select_row">



<td>
<select id= "select1" class = "select1">
<option>Select an option</option>
<option>yes</option>
<option>no</option>
</select>

<select id = 'select2' class = "select2">
</select>

</td>

</tr>
</table>
<button class = "button" type="button" onClick ="addRow()">Add</button>
<button class = "button" type="button" onClick ="getValues()">Print values</button>
</div>

<script>
const table = document.querySelector('#myTable');
const rowToDuplicate = document.querySelector('#initialRow');
function addRow() {
var duplicate = rowToDuplicate.cloneNode(true);
duplicate.removeAttribute('id'); table.appendChild(duplicate);
}

function getValues() {
const rows = document.querySelectorAll('.select_row');
rows.forEach((row, i) => {
console.log(`row ${i}: select1 `, row.querySelector('.select1').value); console.log(`row ${i}: select2 `,row.querySelector('.select2').value);
})

}
</script>


<script>
(function() {

//setup an object fully of arrays
//alternativly it could be something like
//{"yes":[{value:sweet, text:Sweet}.....]}
//so you could set the label of the option tag something different than the name
var bOptions = {
"yes": ["sweet", "wohoo", "yay"],
"no": ["you suck!", "common son"]
};

var A = document.getElementById('select1');
var B = document.getElementById('select2');

//on change is a good event for this because you are guarenteed the value is different
A.onchange = function() {
//clear out B
B.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for (var i in bOptions[_val]) {
//create option tag
var op = document.createElement('option');
//set its value
op.value = bOptions[_val][i];
//set the display label
op.text = bOptions[_val][i];
//append it to B
B.appendChild(op);
}
};
//fire this to update B on load
A.onchange();

})();
</script>


1 Answer
1

Few things:

onchange

clean

ids

I did a quick fix that should get you going. Let me know if this helps.

<div class="container">
<table id="myTable">
<tr id="initialRow" class="select_row">
<td>
<select class="select1">
<option>Select an option</option>
<option>yes</option>
<option>no</option>
</select>
<select class="select2"></select>
</td>
</tr>
</table>
<button class="button" type="button" onClick="addRow()">Add</button>
<button class="button" type="button" onClick="getValues()">Print values</button>
</div>

<script>
const table = document.getElementById('myTable');
const initialRow = document.getElementById('initialRow');
const rowToDuplicate = initialRow.cloneNode(true);

function addRow() {
let duplicate = rowToDuplicate.cloneNode(true);
let select1 = duplicate.lastElementChild.firstElementChild
let select2 = duplicate.lastElementChild.lastElementChild

select1.setAttribute('id', 'select1-' + table.children.length)
select2.setAttribute('id', 'select2-' + table.children.length)

table.appendChild(duplicate);
initSelects(select1, select2);
}

function getValues() {
const rows = document.querySelectorAll('.select_row');
rows.forEach((row, i) => {
console.log(`row ${i}: select1 `, row.querySelector('.select1').value);
console.log(`row ${i}: select2 `, row.querySelector('.select2').value);
})
}

function initSelects(a, b) {
var bOptions = {
"yes": ["sweet", "wohoo", "yay"],
"no": ["you suck!", "common son"]
};

a.onchange = function () {
//clear out B
b.length = 0;
//get the selected value from A
var _val = this.options[this.selectedIndex].value;
//loop through bOption at the selected value
for (var i in bOptions[_val]) {
//create option tag
var op = document.createElement('option');
//set its value
op.value = bOptions[_val][i];
//set the display label
op.text = bOptions[_val][i];
//append it to B
b.appendChild(op);
}
}
}

initSelects(
initialRow.lastElementChild.firstElementChild,
initialRow.lastElementChild.lastElementChild
);
</script>

ids

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.