Concatenating <select> with data from json when I change option

I wrote some code to get <select>s from a Json file. My code generates new selections according to the Json levels available: I have a first selection and, if the option selected has a second selection concatenated, a new <select> comes out with its options. It goes ahead until I reach the "leaf" of the tree. Everything is good so far. Anyway, if I change the option of the previous select, I get one more select appended to the latest one. What I need, instead, is to change the values of the latest option according to the changings of the previous one I made.

<select>

<select>

Example

1 --> 1.1 --> 1.1.1 If I turn "1.1" into "1.2"

I get: 1 --> 1.2 --> 1.1.1 --> 1.2.1 .

What i want to get is: 1 --> 1.2 --> 1.2.1

1 -> 1.1 -> 1.1.1

1.1

1.2

1 -> 1.2 -> 1.2.1

2 Answers
2

Yes, I have a second solution. Use the UTC-Millisecs of Date().getTime() as ID. Every new <select> will always have a numerically larger ID than the one you're clicking. Should work the same way without being forced to adjust the optionIds. I changed all IDs back to 5 digits length.

<select>

Okay, I finally have a solution. Hope this suites your expectations. I had to restructure your object a little. But the most important change is the length of the optionId's. Please note that the ids are one digit longer with each level. Thus, you have a possibility to figure out on what level a change took place. Then you remove all the levels below and rebuild them afterwards with the according values. That's it.

$("#input").hide();

function createSelect(source) {
var select = $('<select>');
// add an additional field in order to be able to choose all real options from start
var headline = $('<option>').attr('value', 0).html('-- choose --');
select.append(headline);

for (var i = 0; i < source.length; i++) {
var object = source[i];
var option = $('<option>').attr('value', object.optionId).html(object.value);
select.append(option);
}

// the optionId of the last option field of each select field
// becomes the id of the select field
select.attr('id', object.optionId);

object = undefined;
i = undefined;

select.change(function() {
/**
* in order to avoid an illogical structure we delete all select-boxes
* that are in lower levels than the current one. To achieve this we compare
* the length of the current select field's id with the length of every other
* select field's id in the dome. If an id's length is larger than maxIdLength,
* the element gets removed.
*/

// define max length by evaluating the length of the current select element's id
const maxIdLength = this.id.length;

// remove every element from DOM that has a larger id length
$( "select" ).each( function(index, element) {
let idLength = element.id.length;

if(idLength > maxIdLength) {
document.getElementById(this.id).remove();
}
});

for (i = 0; i < source.length; i++) {
object = source[i];
if (object.optionId == this.value) {
var selected = object;
}
}
if (selected && selected.children) {

select.after(createSelect(selected.children));
}
});
return select;
}

var inputJson = [
{
"optionId": 10100,
"value": "level 1",
"children": [
{
"optionId": 100100,
"value": "level 1.1",
"children": [
{
"optionId": 1000100,
"value": "level 1.1.1",
"children": [
{
"optionId": 10000100,
"value": "level 1.1.1.1",
}
]
}
]
},
{
"optionId": 100101,
"value": "level 1.2",
"children": [
{
"optionId": 1000101,
"value": "level 1.2.1",
}
]
}
]
},
{
"optionId": 10101,
"value": "level 2",
},
{
"optionId": 10102,
"value": "level 3",
},
{
"optionId": 10103,
"value": "level 4",
},
{
"optionId": 10104,
"value": "level 7"
}

]

$('#con').append(createSelect(inputJson));


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.