Develop Reference

Populating value from an object array to multiple (pre)selected option in Vue.JS

I Try to add the value of (pre)selected options into the multiple dropdowns but I get only the first value rendered.
I try to add data below into multiple select>options, but I got only first(same) value from input and quidoId on every input/quidoId value
stationButtons: [
{
"buttonId": 1,
"quidoId": "101",
"input": "11"
},
{
"buttonId": 2,
"quidoId": "102",
"input": "22"
},
{
"buttonId": 3,
"quidoId": "103",
"input": "33"
},
{
"buttonId": 4,
"quidoId": "104",
"input": "44"
}
]
Output values
I got this issue because I got every dropdown rendered dynamically because I got values(options to choose from) from API. Here is a sample of the code where I render the quidoId(TEST 101) and input(11).
<tr
v-for="(btn, index) in filteredButtonList"
v-bind:key="btn.id"
style="border: 1px solid #6b6b6b; font-size: 14px; width: 100%"
>
<td>{{ btn.buttonListName }}</td>
<td>{{ btn.buttonListDesc }}</td>
<td>
<select
#change="onQuidoIdChange($event)"
class="form-select form-control required"
v-bind:id="index + 1"
style="border: 1px solid #6b6b6b"
>
<option
class="quido-id"
v-for="entry in selectedQuidoId"
:value="entry.quidoId"
selected
disabled
hidden
:key="entry.quidoId"
>
{{ entry.quidoName }}
</option>
<option
v-for="quido in filteredQuidosList"
:value="quido.quidoId"
v-bind:key="quido.quidoId"
v-bind:id="quido.quidoId"
>
{{ quido.quidoName }}
</option>
</select>
</td>
<td>
<tr>
<td>
<input
#change="onInputChange($event)"
type="number"
class="input-custom"
:placeholder="`Input ${index + 1} `"
v-for="input in selectedInput"
:value=input.input
v-bind:id="index + 1"
v-bind:key="input.input"
style="font-size: 12px; border: 1px solid #6b6b6b; text-align: center"
/>
</td>
</tr>
</td>
</tr>
SCRIPT TAG
<script>
export default {
inheritAttrs: false,
data() {
return {
index: 0,
station: {
line: "",
physLine: "",
wsType: "",
ws: "",
name: "",
desc: null,
isValid: true,
order: "",
stationGroupId: "",
stationButtons: [],
},
editIsClicked: false,
deleteIsClicked: false,
selectedQuidoId: [],
selectedStationGroupId: [],
selectedInput: [],
};
},
props: [
"id",
"lineNum",
"physLine",
"wsType",
"ws",
"name",
"isValid",
"stationGroupId",
"stationGroupName",
"order",
],
computed: {
filteredStations() {
return this.$store.getters["stations/stations"];
},
filteredButtonList() {
return this.$store.getters["stations/buttonListGetter"];
},
filteredQuidosList() {
return this.$store.getters["stations/quidosListGetter"];
},
filteredStationGroups() {
return this.$store.getters["stations/stationGroups"];
},
filteredStationButtons() {
return this.$store.getters["stations/stationButtonsGetter"];
},
},
methods: {
editStation(event) {
this.editIsClicked = !this.editIsClicked;
let idFromClickedButton = parseInt(event.target.id);
let idFromStationListResultsId = this.filteredStations.value.find(
(el) => el.id === idFromClickedButton
);
if (idFromStationListResultsId) {
this.station = idFromStationListResultsId;
} else {
alert("This ID does not exist");
}
let quidoFromStationListResults = idFromStationListResultsId.stationButtons;
let quidoForEditing = quidoFromStationListResults.find((el) => el.quidoId);
let quidoFromOriginalArr = this.filteredQuidosList.find(
(el) => el.quidoId === quidoForEditing.quidoId
);
if (quidoFromOriginalArr) {
this.selectedQuidoId.push(quidoFromOriginalArr);
}
let inputFromStationListResults = idFromStationListResultsId.stationButtons;
let inputForEditing = inputFromStationListResults.find((el) => el.input);
if (inputForEditing) {
this.selectedInput.push(inputForEditing);
}
let stationGroupsIdFromStationListArr = idFromStationListResultsId.stationGroupId;
let stationGroupIdFromStationGroupslArr = this.filteredStationGroups.find(
(el) => el.stationGroupsId == stationGroupsIdFromStationListArr
);
if (stationGroupsIdFromStationListArr) {
this.selectedStationGroupId.push(stationGroupIdFromStationGroupslArr);
} else {
alert("This Id does not exist!");
}
},
},
};
</script>
I need only help with the logic behind this solution, how to assign every value to every dropdown?
If I missed some important information which can help please let me know, I will be glad to share more.
CODE SANDBOX EXAMPLE

Dependent Dropdown list in Javascript, jQuery, Json & Ajax

How can I make it so when I select an option it will only populate that one area?
I only want the specific places in that area.
example picture.]
Example of the output (1)
Example of the output (2)
this is the json code that I want to have a function and connect the two or more files.
json file 1
{
"code": "010000000",
"name": "Ilocos Region",
"altName": "Region I"
}
json file 2
{
"code": "012800000",
"name": "Ilocos Norte",
"altName": null,
"region": "010000000"
},
{
"code": "012900000",
"name": "Ilocos Sur",
"altName": null,
"region": "010000000"
},
{
"code": "013300000",
"name": "La Union",
"altName": null,
"region": "010000000"
},
{
"code": "015500000",
"name": "Pangasinan",
"altName": null,
"region": "010000000"
}
here is the code
html part
<div class="container form-group" style="width:600px; margin-top: 10vh">
<form action="" method="GET" id="addform">
<div class="form-group">
<select name="region" id="region" class="form-control input-sm" required>
<option value="">Select Region</option>
</select>
</div>
<div class="form-group">
<select name="province" id="province" class="form-control input-sm" required>
<option value="">Select Province</option>
</select>
</div>
</form>
</div>
<script>
$(function(){
let regionOption;
let provinceOption;
//FOR REGION
$.getJSON('regions.json', function(result){
regionOption += `<option value="">Select Region</option>`;
$.each(result, function(i, region){
regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
});
$('#region').html(regionOption);
});
//FOR PROVINCE
$('#region').change(function(){
$.getJSON('provinces.json', function(result){
provinceOption += `<option value="">Select Province</option>`;
$.each(result, function(region, province){
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
});
});
});
</script>
my failed attempt is this part :
$('#region').change(function(){
if($(this).val() === $(this).val()){
$.getJSON('provinces.json', function(result){
provinceOption += `<option value="">Select Province</option>`;
$.each(result, function(region, province){
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
});
}
});

You can use .filter() to filter your json return inside ajax then inside this compare value of select-box with all values of region if they matches get that data . Finally loop through filter datas and show them inside your select-box.
Demo Code :
//just for demo :)
var result = [{
"code": "010000000",
"name": "Ilocos Region",
"altName": "Region I"
}, {
"code": "010000002",
"name": "Ilocos Region2",
"altName": "Region 2"
}]
var json2 = [
{
"code": "012800000",
"name": "Ilocos Norte",
"altName": null,
"region": "010000000"
},
{
"code": "012900000",
"name": "Ilocos Sur",
"altName": null,
"region": "010000000"
},
{
"code": "013300000",
"name": "La Union",
"altName": null,
"region": "010000002"
},
{
"code": "015500000",
"name": "Pangasinan",
"altName": null,
"region": "010000002"
}
]
$(function() {
let regionOption;
let provinceOption;
//FOR REGION
/* $.getJSON('regions.json', function(result) {*/
regionOption += `<option value="">Select Region</option>`;
$.each(result, function(i, region) {
regionOption += `<option value='${region.code}'> ${region.altName}</option>`;
});
$('#region').html(regionOption);
/* });*/
$('#region').change(function() {
var values = $(this).val()
var provinceOption = ""
/*$.getJSON('provinces.json', function(json2) {*/
//filter your json return..
var items = $(json2)
.filter(function(i, n) {
return n.region === values; //get value where region is same
});
provinceOption += `<option value="">Select Province</option>`;
//loop through dates
$.each(items, function(region, province) {
provinceOption += `<option value='${province.name}'> ${province.name}</option>`;
});
$('#province').html(provinceOption);
/* });*/
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container form-group" style="width:600px; margin-top: 10vh">
<form action="" method="GET" id="addform">
<div class="form-group">
<select name="region" id="region" class="form-control input-sm" required>
<option value="">Select Region</option>
</select>
</div>
<div class="form-group">
<select name="province" id="province" class="form-control input-sm" required>
<option value="">Select Province</option>
</select>
</div>
</form>
</div>

How can I fill a probably infinite amount of dropdowns iterating through objects from a JSON file?

So, I'm trying to fill three separate dropdown menus (could end up being more) with objects pulled from different JSON files depending on the selection from each dropdown. So first selection fills the second one, and so on.
These are the dropdown menus:
<form>
<div>
<select id="level1">
<option selected value="base">Please select one</option>
<option value="first-option">First one</option>
<option value="second-option">Second one</option>
</select>
</div>
<div>
<select id="level2" class="form-control">
<option selected value="base">Please select one</option>
</select>
</div>
<div>
<select id="level3" class="form-control">
<option selected value="base">Please select one</option>
</select>
</div>
<div id="submit">
<button type="submit">Go</button>
</div>
</form>
This is a sample JSON file:
{
"first_option": {
"me": "first_option",
"COD_REF": "MX09017CL01AP",
"TITLE": "First Option",
"children": {
"child01": {
"me": "child01",
"COD_REF": "001",
"TITLE": "Child 1",
"children": {
"grandchild01": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
},
"grandchild02": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
}
}
}
},
"child02": {
"me": "child02",
"COD_REF": "002",
"TITLE": "Child 2",
"children": {
"grandchild01": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
},
"grandchild02": {
"me": "grandchild01",
"TITLE": "Grandchild 1"
}
}
},
}
}
The solution I came up with works just fine. The thing is I could probably do with some iteration, I just don't know how to do it. Here's an abridged version of what I have:
var vals = [];
var $level1 = $("#level1");
var $level2 = $("#level2");
var $level3 = $("#level3");
function generateTable(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
};
function generateTable2(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
}
function generateTable3(info) {
$(".COD_REF").innerHTML(info.COD_REF);
$(".TITLE").innerHTML(info.TITLE);
}
//first dropdown
$("#level1").change(function () {
var $dropdown = $(this);
var key = $dropdown.val();
function generateDropdown(vals) {
$level2.append("<option selected value=\"base\">Please select one</option>");
$.each(vals, function (index, value) {
$level2.append("<option value=\"" + value.me + "\">" + value.TITLE + "</option>");
});
};
switch (key) {
case 'first_option':
$.getJSON("recursos/json/ajsonfile.json", function (data) {
$level2.empty();
vals = data.first_option.children;
generateDropdown(vals)
$("#first-table").removeClass("d-none");
$("#first-table").addClass("d-block");
info = data.first_option;
$(".first-title").innerHTML(info.TITLE);
generateTable(info);
});
break
case 'second_option':
$.getJSON("recursos/json/anotherjsonfile.json", function (data) {
$level2.empty();
vals = data.second_option.children;
generateDropdown(vals)
$("#first-table").removeClass("d-none");
$("#first-table").addClass("d-block");
info = data.second_option;
$(".first-title").innerHTML(info.TITLE);
generateTable(info);
});
break
case 'base':
$level2.empty();
vals = ['Please select one'];
$level2.append("<option>" + vals + "</option>");
$("#first-table").removeClass("d-block");
$("#first-table").addClass("d-none");
console.log(vals);
break
}
});
//second dropdown
$("#level2").change(function () {
var $dropdown = $(this);
var key = $dropdown.val();
function generateDropdown(vals) {
$level3.append("<option selected value=\"base\">Please select one</option>");
$.each(vals, function (index, value) {
$level3.append("<option value=\"" + value.yo + "\">" + value.TITLE + "</option>");
});
};
switch (key) {
case 'first-child':
$.getJSON("recursos/json/ajsonfile.json", function (data) {
$level3.empty();
vals = data.first_option.children.child01.children;
generateDropdown(vals)
$("#second-table").removeClass("d-none");
$("#second-table").addClass("d-block");
info = data.first_option.children.child01;
$(".second-title").innerHTML(info.TITLE);
generateTable2(info);
});
break
//second, third, fourth child options etc.
case 'base':
$level3.empty();
vals = ['Please select one'];
$level3.append("<option>" + vals + "</option>");
$("#cedula2").removeClass("d-block");
$("#cedula2").addClass("d-none");
console.log(vals);
break
}
});
//third dropdown
$("#level3").change(function () {
// I think you get the gist
});
Is it possible to do some iteration so I can fill all the dropdowns in just one loop?

show only related item in the second select form using javascript

I'm writing a small php page with 2 form:
<div class="input-field col s12">
<select id="select1">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<select id="select2">
<option value="" disabled selected>Choose your option</option>
<option rel="1" value="11">Option 11</option>
<option rel="1" value="12">Option 12</option>
<option rel="2" value="21">Option 21</option>
<option rel="2" value="22">Option 22</option>
<option rel="3" value="31">Option 31</option>
<option rel="3" value="32">Option 32</option>
</select>
</div>
After I select the first select form, I want that only the related values are showed in the second.
My js is:
$(function() {
$("#select1").on('change', function() {
$subcat = $("#select2");
var _rel = $(this).val();
$subcat.find("[rel="+_rel+"]").show();
$subcat.prop("disabled",false);
// re-initialize material-select
$('#select2').material_select();
});
});
I also try with
var selectobject=document.getElementById("select2")
for (var i=0; i<selectobject.length; i++)
{
if (selectobject.options[i].value == 'xxxx' )
{
selectobject.remove(i);
}
}
But I need the name option, not the value.

$(function(){
$('#select1').on('change', function(){
var val = $(this).val();
var sub = $('#select2');
$('option', sub).filter(function(){
if ($(this).attr('rel') === val) {
if ($(this).parent('span').length) {
$(this).unwrap();
}
} else {
if (!$(this).parent('span').length) {
$(this).wrap( "<span>" ).parent().hide();
}
}
});
});
});

I don't see which options at the second form corresponding to the first, however, try populating the second select rather than removing items from it. like:
<select id="select1" onchange="myfunction(this.value)">
<script>
function myfunction(opt){
var $Select2 = $('#select2');
var option1 = [
{
"name": "option description",
"value": "1"
}, {
"name": "option description",
"value": "1"
}]
var option2 = [
{
"name": "option description",
"value": "1"
}, {
"name": "option description",
"value": "1"
}]
if(opt === option1){
$.each(option1, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text : item.name
}));
});
}
if(opt === option2){
$.each(option2, function (i, item) {
$('#mySelect').append($('<option>', {
value: item.value,
text : item.name
}));
});
}
}
</script>

Unable to set selected value in select box

// inside controller
$scope.newEngagement.subType = 3;
$scope.engagementSubTypeList = [
{ "subTypeId": 1, "subTypeName": "value1" },
{ "subTypeId": 2, "subTypeName": "value2" },
{ "subTypeId": 3, "subTypeName": "value3" },
{ "subTypeId": 4, "subTypeName": "value4" },
];
<div class="col s12 m12 margin-top-2x" ng-show="isSubType">
<label class="uppercase blue-grey-text text-darken-5 font-1-5x clear left">SELECT SUB TYPE </label>
<select
name="engagement_subtype"
id="engagement_subtype"
ng-model="newEngagement.subType"
class="browser-default margin-top-x col s12 m8 clear">
<option value="{{subTypeList.subTypeId}}"
selected="subTypeList.subTypeId == newEngagement.subType"
ng-repeat="subTypeList in engagementSubTypeList track by subTypeList.subTypeId ">
{{subTypeList.subTypeName}}
</option>
</select>
</div>
According to that above code "value3" should be selected but not happen same as I am using materialize select box browser default class.

Can try this one using ng-options and assign newEngagement.subType from your $scope.engagementSubTypeList like bellow. that should work.
<div class="">
<label class="uppercase">SELECT SUB TYPE </label>
<select ng-options="subTypeList.subTypeId as subTypeList.subTypeName for subTypeList in engagementSubTypeList" ng-model="newEngagement.subType">
<option value="">Select One</option>
</select>
</div>
and controller
$scope.engagementSubTypeList = [
{ "subTypeId": 1, "subTypeName": "value1" },
{ "subTypeId": 2, "subTypeName": "value2" },
{ "subTypeId": 3, "subTypeName": "value3" },
{ "subTypeId": 4, "subTypeName": "value4" },
];
$scope.newEngagement = {};
$scope.newEngagement.subType = $scope.engagementSubTypeList[2].subTypeId;

You can use the following code.
<div class="col s12 m12 margin-top-2x">
<label class="uppercase blue-grey-text text-darken-5 font-1-5x clear left">SELECT SUB TYPE </label>
<select
name="engagement_subtype"
id="engagement_subtype"
ng-model="newEngagement.subType"
class="browser-default margin-top-x col s12 m8 clear">
<option value="{{subTypeList.subTypeId}}"
ng-selected="{{newEngagement.subType == subTypeList.subTypeId}}"
ng-repeat="subTypeList in engagementSubTypeList track by subTypeList.subTypeId ">
{{subTypeList.subTypeName}}
</option>
</select>
</div>
$scope.newEngagement = {};
$scope.newEngagement.subType = 2;//{"subTypeId":3};
$scope.engagementSubTypeList = [
{ "subTypeId": 1, "subTypeName": "value1" },
{ "subTypeId": 2, "subTypeName": "value2" },
{ "subTypeId": 3, "subTypeName": "value3" },
{ "subTypeId": 4, "subTypeName": "value4" },
];
Demo
My suggestion is to avoid the ng-repeat in selection option. You will be use to ng-option, It is only a correct approch in angularjs.