I have a dropdown, with a button to select all values. The array already has some default values in it, and on a click of a button, all the rest values should be pushed (selected).
I have tried other solutions from SO, but I cannot seem to get it work.
The values I need to push to another array:
valuesToPush: {
value1: 'Value 1',
value2: 'value 2',
value3: 'Value 3',
value4: 'Value 4',
value5: 'Value 5',
},
The array which I am pushing to is empty initially, so:
pushedValues: [];
On page mount, I push some default values to the array:
pushedValues.push('value1','value2');
How can I add the rest of the values by the key (I need the key for the request, and the value is for showing on the page) when I click on the button? I could do it the same way, but more key-value pairs might be added, so I need it to be dynamic.
Try this
const pushedValues = [];
function myFunction() {
var x = document.getElementById("val").value;
console.log("You selected: " + x);
if(!pushedValues.includes(x)){
pushedValues.push(x);
console.log(pushedValues);
}
}<label for="cars">Choose a value:</label>
<select name="val" id="val" onchange="myFunction()">
<option value="value1">value 1</option>
<option value="value2">value 2</option>
<option value="value3">value 3</option>
<option value="value4">value 4</option>
<option value="value5">value 5</option>
</select>Not sure if you can but you can convert your values to an array of objects and try something like the code below (need to add more work to work on 'deselection' of items but I think this might get you closer to what you are trying to achieve. (I think)
// update values to array of objects
const valuesToPush = [{
value1: 'Value 1'
},
{
value2: 'value 2'
},
{
value3: 'Value 3'
},
{
value4: 'Value 4'
},
{
value5: 'Value 5'
},
];
const pushedValues = [];
// push some defaults (keys only)
pushedValues.push('value1', 'value4');
console.log(pushedValues);
function init() {
var selectObj = document.getElementById("select");
valuesToPush.forEach(obj => {
for (const [key, value] of Object.entries(obj)) {
var newOption = new Option(value, key);
// mark default as selected
if (pushedValues.includes(key)) {
newOption.selected = true;
}
// add them as options for the select
selectObj.add(newOption);
}
});
}
function myFunction() {
var x = document.getElementById("select").value;
console.log("You selected: " + x);
console.log(pushedValues);
if (!pushedValues.includes(x)) {
pushedValues.push(x);
console.log(pushedValues);
}
}
init();<label for="cars">Choose a value:</label>
<br/>
<select name="val" id="select" multiple onchange="myFunction()"></select>