JavaScript Show/скрыть несколько кнопок с реляционным условием

JavaScript Show/скрыть несколько кнопок с реляционным условием ⇐ Javascript

1 сообщение • Страница 1 из 1

Anonymous

JavaScript Show/скрыть несколько кнопок с реляционным условием

Цитата

Сообщение Anonymous » 22 фев 2025, 17:48

может кто -нибудь помочь мне кодировать эту проблему с реляционным условием ... < /p>
В основном есть 7 выпадающих списка кнопок, а внутри - флажки, и каждый из этих флажков имеет свои собственные связанные данные в каждом Кнопка раскрытия .. < /p>
Вот журнал структурированного массива для справки: < /p>
[
{
"ic_manufacturer": "China",
"ic_family": [
"fruits"
],
"field_cry_part_num": {
"fruits": [
"CT2016DB19200C0FLHA7",
"KV5032G622A644L2GF00"
]
},
"field_cry_dimensions": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"2.0×1.6mm"
],
"KV5032G622A644L2GF00": [
"5.0×3.2mm"
]
}
},
"field_cry_freq_khz": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"2"
],
"KV5032G622A644L2GF00": [
""
]
}
},
"field_cry_load_capacitance": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"7pF"
],
"KV5032G622A644L2GF00": [
""
]
}
},
"field_cry_aec": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"45"
],
"KV5032G622A644L2GF00": [
""
]
}
}
},
{
"ic_manufacturer": "Russia",
"ic_family": [
"animals",
"human"
],
"field_cry_part_num": {
"animals": [
"CX1210DB27120D0FFFCC",
"CX1210DB27120H0FFFCC"
],
"human": [
"CX1210DB27120H0FLHCC",
"CX1210DB27120D0GLHCC"
]
},
"field_cry_dimensions": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1.2×1.0mm"
],
"CX1210DB27120H0FFFCC": [
"1.2×1.0mm"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"1.2×1.0mm"
],
"CX1210DB27120D0GLHCC": [
"1.2×1.0mm"
]
}
},
"field_cry_freq_khz": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1"
],
"CX1210DB27120H0FFFCC": [
"1"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"1"
],
"CX1210DB27120D0GLHCC": [
"1"
]
}
},
"field_cry_load_capacitance": {
"animals": {
"CX1210DB27120D0FFFCC": [
"8pF"
],
"CX1210DB27120H0FFFCC": [
"1pF"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"12pF"
],
"CX1210DB27120D0GLHCC": [
"8pF"
]
}
},
"field_cry_aec": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1"
],
"CX1210DB27120H0FFFCC": [
"1"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"1"
],
"CX1210DB27120D0GLHCC": [
"1"
]
}
}
},
{
"ic_manufacturer": "America",
"ic_family": [
"place"
],
"field_cry_part_num": {
"place": [
"KV5032G*******P3GF00",
"KV5032G*******P2GF00"
]
},
"field_cry_dimensions": {
"place": {
"KV5032G*******P3GF00": [
"5.0×3.2mm"
],
"KV5032G*******P2GF00": [
"5.0×3.2mm"
]
}
},
"field_cry_freq_khz": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
},
"field_cry_load_capacitance": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
},
"field_cry_aec": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
}
}
]
< /code>
Также мой существующий код: < /p>
let groupedData = [];

// Fetch IC manufacturer and IC family array from PHP
fetch('/ic-family-array')
.then(response => response.json())
.then(data => {
console.log('Raw data:', data); // Check the data returned by the AJAX call
groupedData = groupByManufacturer(data);
console.log('Grouped IC Family Array:', groupedData);
})
.catch(error => {
console.error('Error fetching IC family array:', error);
});

// Function to group related array
function groupByManufacturer(data) {
const { ic_manufacturer_arr, ic_family_arr, cry_part_num_arr, cry_dimensions_arr, cry_freq_khz_arr, cry_load_capacitance_arr, cry_aec_arr } = data;
const result = [];

ic_manufacturer_arr.forEach(manufacturer => {
let families = ic_family_arr.filter(family => family.ic_manufacturer === manufacturer);
let manufacturerEntry = {
ic_manufacturer: manufacturer,
ic_family: [],
field_cry_part_num: {},
field_cry_dimensions: {},
field_cry_freq_khz: {},
field_cry_load_capacitance: {},
field_cry_aec: {}
};

families.forEach(family => {
// Find all part numbers for this manufacturer and family
let partNumbers = cry_part_num_arr
.filter(part => part.ic_manufacturer === manufacturer && part.ic_family === family.ic_family)
.map(part => part.field_cry_part_num);

let dimensionsByFamily = {};
let freqByFamily = {};
let loadCapByFamily = {};
let aecByFamily = {};

partNumbers.forEach(partNumber => {
// Find dimensions for the part number
let dimensions = cry_dimensions_arr
.filter(dim => dim.ic_manufacturer === manufacturer && dim.ic_family === family.ic_family && dim.field_cry_part_num === partNumber)
.map(dim => dim.field_cry_dimensions);
if (dimensions.length > 0) {
dimensionsByFamily[partNumber] = dimensions;
}

// Find frequencies for the part number
let frequencies = cry_freq_khz_arr
.filter(freq => freq.ic_manufacturer === manufacturer && freq.ic_family === family.ic_family && freq.field_cry_part_num === partNumber)
.map(freq => freq.field_cry_freq_khz);
if (frequencies.length > 0) {
freqByFamily[partNumber] = frequencies;
}

// Find load capacitance for the part number
let loadCapacitance = cry_load_capacitance_arr
.filter(load => load.ic_manufacturer === manufacturer && load.ic_family === family.ic_family && load.field_cry_part_num === partNumber)
.map(load => load.field_cry_load_capacitance);
if (loadCapacitance.length > 0) {
loadCapByFamily[partNumber] = loadCapacitance;
}

// Find AEC for the part number
let aec = cry_aec_arr
.filter(a => a.ic_manufacturer === manufacturer && a.ic_family === family.ic_family && a.field_cry_part_num === partNumber)
.map(a => a.field_cry_aec);
if (aec.length > 0) {
aecByFamily[partNumber] = aec;
}
});

// Add the family to the manufacturer entry
manufacturerEntry.ic_family.push(family.ic_family);

// Organize
manufacturerEntry.field_cry_part_num[family.ic_family] = partNumbers;
manufacturerEntry.field_cry_dimensions[family.ic_family] = dimensionsByFamily;
manufacturerEntry.field_cry_freq_khz[family.ic_family] = freqByFamily;
manufacturerEntry.field_cry_load_capacitance[family.ic_family] = loadCapByFamily;
manufacturerEntry.field_cry_aec[family.ic_family] = aecByFamily;
});

result.push(manufacturerEntry);
});

const finalResult = result.map(manufacturer => {
return {
ic_manufacturer: manufacturer.ic_manufacturer,
ic_family: manufacturer.ic_family,
field_cry_part_num: manufacturer.field_cry_part_num,
field_cry_dimensions: manufacturer.field_cry_dimensions,
field_cry_freq_khz: manufacturer.field_cry_freq_khz,
field_cry_load_capacitance: manufacturer.field_cry_load_capacitance,
field_cry_aec: manufacturer.field_cry_aec
};
});

return finalResult;
}

const manufacturerCheckboxes = document.querySelectorAll('#manufacturerDropdown input[type="checkbox"]');
manufacturerCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function () {
const selectedManufacturer = this.value;
const familyCheckboxes = document.querySelectorAll('#familyDropdown input[type="checkbox"]');
const crypartnumCheckboxes = document.querySelectorAll('#crypartnumDropdown input[type="checkbox"]');
const dimensionsCheckboxes = document.querySelectorAll('#dimensionsDropdown input[type="checkbox"]');
const frequencyCheckboxes = document.querySelectorAll('#frequencyDropdown input[type="checkbox"]');
const load_capacitanceCheckboxes = document.querySelectorAll('#load_capacitanceDropdown input[type="checkbox"]');
const aecCheckboxes = document.querySelectorAll('#aecDropdown input[type="checkbox"]');
< /code>

IC Manufacturer

{% for ic_manufacturer in ic_manufacturer_arr %}
{{ ic_manufacturer }}

{% endfor %}

IC Family

{% for ic_family in ic_family_arr %}
{{ ic_family['ic_family'] }}

{% endfor %}

{# #}

Crystal Device Part Number

{% for cry_part_num in cry_part_num_arr_no_duplicate %}
{{ cry_part_num.field_cry_part_num }}

{% endfor %}

Dimensions (L×W)

{% for cry_dimensions in cry_dimensions_arr_no_duplicate %}
{{ cry_dimensions.field_cry_dimensions }}

{% endfor %}

Frequency (kHz)

{% for cry_freq_khz in cry_freq_khz_arr_no_duplicate %}
{{ cry_freq_khz.field_cry_freq_khz }}

{% endfor %}

Load Capacitance

{% for cry_load_capacitance in cry_load_capacitance_arr_no_duplicate %}
{{ cry_load_capacitance.field_cry_load_capacitance }}

{% endfor %}

AEC-Q

{% for cry_aec in cry_aec_arr_no_duplicate %}
{{ cry_aec.field_cry_aec }}

{% endfor %}

< /code>
what im trying to get is
every checkboxes i click it will show the related checkboxes and hide those checkbox that are not related..
i will give example scenario..
if i check/click russia from manufacturer, it show russia with checkmark and hide USA and china also it will show "animals and human" because they are related to russia and hide "fruits and place" in family dropdown... same goes to other dropdown buttons.
if i check/click animals from family it show animals with checkmark and hide other families
also it will show russia since russia is related to animals hide the others manufacturer.. same goes to other checkboxes.
aslong as there are checkmark in any of the dropdown button it will only show the related checkboxes.. also if there are no checkmarked in any of dropdown button it will show all checkboxes..

Подробнее здесь: https://stackoverflow.com/questions/794 ... -condition

1740235705

Anonymous

 может кто -нибудь помочь мне кодировать эту проблему с реляционным условием ... < /p>
В основном есть 7 выпадающих списка кнопок, а внутри - флажки, и каждый из этих флажков имеет свои собственные связанные данные в каждом Кнопка раскрытия ..  < /p>
Вот журнал структурированного массива для справки: < /p>
[
{
"ic_manufacturer": "China",
"ic_family": [
"fruits"
],
"field_cry_part_num": {
"fruits": [
"CT2016DB19200C0FLHA7",
"KV5032G622A644L2GF00"
]
},
"field_cry_dimensions": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"2.0×1.6mm"
],
"KV5032G622A644L2GF00": [
"5.0×3.2mm"
]
}
},
"field_cry_freq_khz": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"2"
],
"KV5032G622A644L2GF00": [
""
]
}
},
"field_cry_load_capacitance": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"7pF"
],
"KV5032G622A644L2GF00": [
""
]
}
},
"field_cry_aec": {
"fruits": {
"CT2016DB19200C0FLHA7": [
"45"
],
"KV5032G622A644L2GF00": [
""
]
}
}
},
{
"ic_manufacturer": "Russia",
"ic_family": [
"animals",
"human"
],
"field_cry_part_num": {
"animals": [
"CX1210DB27120D0FFFCC",
"CX1210DB27120H0FFFCC"
],
"human": [
"CX1210DB27120H0FLHCC",
"CX1210DB27120D0GLHCC"
]
},
"field_cry_dimensions": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1.2×1.0mm"
],
"CX1210DB27120H0FFFCC": [
"1.2×1.0mm"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"1.2×1.0mm"
],
"CX1210DB27120D0GLHCC": [
"1.2×1.0mm"
]
}
},
"field_cry_freq_khz": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1"
],
"CX1210DB27120H0FFFCC": [
"1"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"1"
],
"CX1210DB27120D0GLHCC": [
"1"
]
}
},
"field_cry_load_capacitance": {
"animals": {
"CX1210DB27120D0FFFCC": [
"8pF"
],
"CX1210DB27120H0FFFCC": [
"1pF"
]
},
"human": {
"CX1210DB27120H0FLHCC": [
"12pF"
],
"CX1210DB27120D0GLHCC": [
"8pF"
]
}
},
"field_cry_aec": {
"animals": {
"CX1210DB27120D0FFFCC": [
"1"
],
"CX1210DB27120H0FFFCC": [
"1"
]
},
"human":  {
"CX1210DB27120H0FLHCC": [
"1"
],
"CX1210DB27120D0GLHCC": [
"1"
]
}
}
},
{
"ic_manufacturer": "America",
"ic_family": [
"place"
],
"field_cry_part_num": {
"place": [
"KV5032G*******P3GF00",
"KV5032G*******P2GF00"
]
},
"field_cry_dimensions": {
"place": {
"KV5032G*******P3GF00": [
"5.0×3.2mm"
],
"KV5032G*******P2GF00": [
"5.0×3.2mm"
]
}
},
"field_cry_freq_khz": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
},
"field_cry_load_capacitance": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
},
"field_cry_aec": {
"place": {
"KV5032G*******P3GF00": [
"1"
],
"KV5032G*******P2GF00": [
"1"
]
}
}
}
]
< /code>
Также мой существующий код: < /p>
    let groupedData = [];

// Fetch IC manufacturer and IC family array from PHP
fetch('/ic-family-array')
.then(response => response.json())
.then(data => {
console.log('Raw data:', data);  // Check the data returned by the AJAX call
groupedData = groupByManufacturer(data);
console.log('Grouped IC Family Array:', groupedData);
})
.catch(error => {
console.error('Error fetching IC family array:', error);
});

// Function to group related array
function groupByManufacturer(data) {
const { ic_manufacturer_arr, ic_family_arr, cry_part_num_arr, cry_dimensions_arr, cry_freq_khz_arr, cry_load_capacitance_arr, cry_aec_arr } = data;
const result = [];

ic_manufacturer_arr.forEach(manufacturer => {
let families = ic_family_arr.filter(family => family.ic_manufacturer === manufacturer);
let manufacturerEntry = {
ic_manufacturer: manufacturer,
ic_family: [],
field_cry_part_num: {},
field_cry_dimensions: {},
field_cry_freq_khz: {},
field_cry_load_capacitance: {},
field_cry_aec: {}
};

families.forEach(family => {
// Find all part numbers for this manufacturer and family
let partNumbers = cry_part_num_arr
.filter(part => part.ic_manufacturer === manufacturer && part.ic_family === family.ic_family)
.map(part => part.field_cry_part_num);

let dimensionsByFamily = {};
let freqByFamily = {};
let loadCapByFamily = {};
let aecByFamily = {};

partNumbers.forEach(partNumber => {
// Find dimensions for the part number
let dimensions = cry_dimensions_arr
.filter(dim => dim.ic_manufacturer === manufacturer && dim.ic_family === family.ic_family && dim.field_cry_part_num === partNumber)
.map(dim => dim.field_cry_dimensions);
if (dimensions.length > 0) {
dimensionsByFamily[partNumber] = dimensions;
}

// Find frequencies for the part number
let frequencies = cry_freq_khz_arr
.filter(freq =>  freq.ic_manufacturer === manufacturer && freq.ic_family === family.ic_family && freq.field_cry_part_num === partNumber)
.map(freq => freq.field_cry_freq_khz);
if (frequencies.length > 0) {
freqByFamily[partNumber] = frequencies;
}

// Find load capacitance for the part number
let loadCapacitance = cry_load_capacitance_arr
.filter(load => load.ic_manufacturer === manufacturer && load.ic_family === family.ic_family && load.field_cry_part_num === partNumber)
.map(load => load.field_cry_load_capacitance);
if (loadCapacitance.length > 0) {
loadCapByFamily[partNumber] = loadCapacitance;
}

// Find AEC for the part number
let aec = cry_aec_arr
.filter(a => a.ic_manufacturer === manufacturer && a.ic_family === family.ic_family && a.field_cry_part_num === partNumber)
.map(a => a.field_cry_aec);
if (aec.length > 0) {
aecByFamily[partNumber] = aec;
}
});

// Add the family to the manufacturer entry
manufacturerEntry.ic_family.push(family.ic_family);

// Organize
manufacturerEntry.field_cry_part_num[family.ic_family] = partNumbers;
manufacturerEntry.field_cry_dimensions[family.ic_family] = dimensionsByFamily;
manufacturerEntry.field_cry_freq_khz[family.ic_family] = freqByFamily;
manufacturerEntry.field_cry_load_capacitance[family.ic_family] = loadCapByFamily;
manufacturerEntry.field_cry_aec[family.ic_family] = aecByFamily;
});

result.push(manufacturerEntry);
});

const finalResult = result.map(manufacturer => {
return {
ic_manufacturer: manufacturer.ic_manufacturer,
ic_family: manufacturer.ic_family,
field_cry_part_num: manufacturer.field_cry_part_num,
field_cry_dimensions: manufacturer.field_cry_dimensions,
field_cry_freq_khz: manufacturer.field_cry_freq_khz,
field_cry_load_capacitance: manufacturer.field_cry_load_capacitance,
field_cry_aec: manufacturer.field_cry_aec
};
});

return finalResult;
}

const manufacturerCheckboxes = document.querySelectorAll('#manufacturerDropdown input[type="checkbox"]');
manufacturerCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function () {
const selectedManufacturer = this.value;
const familyCheckboxes = document.querySelectorAll('#familyDropdown input[type="checkbox"]');
const crypartnumCheckboxes = document.querySelectorAll('#crypartnumDropdown input[type="checkbox"]');
const dimensionsCheckboxes = document.querySelectorAll('#dimensionsDropdown input[type="checkbox"]');
const frequencyCheckboxes = document.querySelectorAll('#frequencyDropdown input[type="checkbox"]');
const load_capacitanceCheckboxes = document.querySelectorAll('#load_capacitanceDropdown input[type="checkbox"]');
const aecCheckboxes = document.querySelectorAll('#aecDropdown input[type="checkbox"]');
< /code>






IC Manufacturer



[list]
{% for ic_manufacturer in ic_manufacturer_arr %}
[*]



{{ ic_manufacturer }}



{% endfor %}
[/list]












IC Family



[list]
{% for ic_family in ic_family_arr %}
[*]



{{ ic_family['ic_family'] }}



{% endfor %}
[/list]











{#  #}

















Crystal Device Part Number



[list]
{% for cry_part_num in cry_part_num_arr_no_duplicate %}
[*]



{{ cry_part_num.field_cry_part_num }}



{% endfor %}
[/list]










Dimensions (L×W)



[list]
{% for cry_dimensions in cry_dimensions_arr_no_duplicate %}
[*]



{{ cry_dimensions.field_cry_dimensions }}



{% endfor %}
[/list]










Frequency (kHz)



[list]
{% for cry_freq_khz in cry_freq_khz_arr_no_duplicate %}
[*]



{{ cry_freq_khz.field_cry_freq_khz }}



{% endfor %}
[/list]










Load Capacitance



[list]
{% for cry_load_capacitance in cry_load_capacitance_arr_no_duplicate %}
[*]



{{ cry_load_capacitance.field_cry_load_capacitance }}



{% endfor %}
[/list]










AEC-Q



[list]
{% for cry_aec in cry_aec_arr_no_duplicate %}
[*]



{{ cry_aec.field_cry_aec }}



{% endfor %}
[/list]














< /code>
what im trying to get is
every checkboxes i click it will show the related checkboxes and hide those checkbox that are not related..
i will give example scenario..
if i check/click russia from manufacturer, it show russia with checkmark and hide USA and china also it will show "animals and human" because they are related to russia and hide "fruits and place" in family dropdown... same goes to other dropdown buttons.
if i check/click animals from family it show animals with checkmark and hide other families
also it will show russia since russia is related to animals hide the others manufacturer.. same goes to other checkboxes.
aslong as there are checkmark in any of the dropdown button it will only show the related checkboxes.. also if there are no checkmarked in any of dropdown button it will show all checkboxes.. 

Подробнее здесь: [url]https://stackoverflow.com/questions/79459780/javascript-show-hide-multiple-buttons-with-relational-condition[/url]