Вывести один из массивов соответствующий значению value

@Женек17 · Регистрация: 18.11.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте, есть два поля ввода, в первое выводится массив muBR во второе поле необходимо выводить массив с именем соответствующим выбранному в первом поле, например Akai, LG и т.д.
То есть думаю нужно взять значение из value в функции brand каким то неведомым мне способом присвоить его значение переменной mods чтобы потом можно было его использовать в mods.forEach

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table  cellpadding="10" cellspacing="5">     <!--Табличка просто позиционирует поля-->
    <tbody>
        <tr>
            <td>        
 <label for="BR_tv">Введите бренд :</label>                        <!--Поле для ввода бренда-->
 <input name="BRtv" list="dtl_br" onchange="brand(this.value)"  /> 
 <datalist id="dtl_br"></datalist>
            </td>
            <td>    
            <div id="dm_blok"  style="display:none;">     <!--скрывающийся блок-->
<label for="MD_tv">Введите модель:</label>                   <!--второе поле, выбор модели-->
<input name="MDtv" list="dtl_md" />
<datalist id="dtl_md"></datalist>
            </div>          
            </td>
        </tr>
    </tbody>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 myBR  = ['Akai','BBK','LG','Philips','Samsung']         // массив брендов
               Akai  = ['LEA-32M19P','LES-32V01M' ]
               BBK   = ['24Y32','LEM-32E15','LED-19T40','42LE8700' ]
               LG    = ['26LN250','32LB560','40ES5052','47H4200' ]
         
 
let mods = ''
 
function brand(value) {
 
 mods = LG;   // mods нужно присвоить значение из value так, чтобы использовать ниже в mods.forEach, LG стоит для теста
 
 for (let i = 0; i < myBR.length; i++ ){    //проверка совпадений с масивом myBR
      if (myBR[i] == value) {
     dm_blok.style = "display: block";       
     break;} 
     else {dm_blok.style = "display: none" }
  }
}
 
 const dtl_br = document.getElementById('dtl_br')   
 myBR.forEach(BRtv => dtl_br.appendChild( new Option('',BRtv)))
 
 
 const dtl_md = document.getElementById('dtl_md')
 brand()
 mods.forEach(MDtv => dtl_md.appendChild( new Option('',MDtv)))

@klyapa · 19.11.2022, 20:54

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<table  cellpadding="10" cellspacing="5"> <!--Табличка просто позиционирует поля-->
    <tbody>
        <tr>
            <td>
                <label for="BR_tv">Введите бренд :</label> <!--Поле для ввода бренда-->
                <input name="BRtv" list="dtl_br" onchange="brand(this.value)" />
                <datalist id="dtl_br"></datalist>
            </td>
            <td>
                <div id="dm_blok" style="display:none;"> <!--скрывающийся блок-->
                    <label for="MD_tv">Введите модель:</label> <!--второе поле, выбор модели-->
                    <input name="MDtv" list="dtl_md" />
                    <datalist id="dtl_md"></datalist>
                </div>
            </td>
        </tr>
    </tbody>
</table>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const data = {
    myBR: ['Akai', 'BBK', 'LG','Philips', 'Samsung'], // массив брендов
    Akai: ['LEA-32M19P', 'LES-32V01M'],
    BBK: ['24Y32', 'LEM-32E15', 'LED-19T40', '42LE8700'],
    LG: ['26LN250', '32LB560', '40ES5052', '47H4200'],
};
 
const br = document.getElementById('dtl_br');
const md = document.getElementById('dtl_md');
const block = document.getElementById('dm_blok');
 
data.myBR.forEach(m => br.append(new Option('', m)));
 
function brand(val) {
    md.innerHTML = '';
    if(data[val]) {
        data[val].forEach(m => md.append(new Option('', m)));
        block.style.display = 'block';
    } else {
        block.style.display = 'none';
    }
}

@Женек17 · 19.11.2022, 23:33 **[ТС]**

Большое спасибо за помощь, все прекрасно работает, отдельное спасибо за то что оптимизировали массивы .

Добавлено через 16 минут
Не сочтите за наглость но возможно вы еще поможете оптимизировать функцию function model, в этом же коде, которая должна выводить описание к выбранной модели (понимаю как жутко и неудобно это на if-ах смотрится)
Цель: чтобы при добавлении нового описания в массив не приходилось править функцию (так же как сейчас с моделями, я могу их добавлять не правя код)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table  cellpadding="10" cellspacing="5">     <!--Табличка просто позиционирует поля-->
    <tbody>
        <tr>
            <td>
            
 <label for="BR_tv">Введите бренд :</label>              <!--Поле для ввода бренда-->
 <input name="BRtv" list="dtl_br" onchange="brand(this.value)"  /> 
 <datalist id="dtl_br"></datalist>
 
            </td>
            <td>
            
            <div id="dm_blok"  style="display:none;">     <!--скрывающийся блок-->
<label for="MD_tv">Введите модель:</label>                <!--второе поле, выбор модели-->
<input name="MDtv" list="dtl_md" onchange="model(this.value)"/>
<datalist id="dtl_md"></datalist>
            </div> 
            </td>
        </tr>
    </tbody>
</table>
 
<div id="op_blok"  style="display:none;"></div>      <!--блок с описанием-->

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const data = {
    myBR: ['Akai', 'BBK', 'LG','Philips', 'Samsung'], 
    Akai: ['LEA-32M19P', 'LES-32V01M'],
    BBK: ['24Y32', 'LEM-32E15', 'LED-19T40', '42LE8700'],
    LG: ['26LN250', '32LB560', '40ES5052', '47H4200'],
};
 
 const LEA_32M19P = [ "Akai LEA-32M19P здесь описание ",
                        "примерно небольшой абзац"];
                        
 const LES_32V01M = [ "Akai LES-32V01M здесь тоже описание ",
                        "и таких будет еще много"];                      
 
 
const br = document.getElementById('dtl_br');     
const md = document.getElementById('dtl_md');                     
const block = document.getElementById('dm_blok');  
const block2 = document.getElementById('op_blok');    
   
 
data.myBR.forEach(m => br.append(new Option('', m)));
 
function brand(val) {
    md.innerHTML = ''; 
    
    if(data[val]) {
        data[val].forEach(m => md.append(new Option('', m)));
        block.style.display = 'block';
    } else {
        block.style.display = 'none';
    }
}
 
 
 function model(val) {
      if(val == 'LEA-32M19P' ) {
        block2.style.display = 'block';
        block2.innerHTML = LEA_32M19P.join('<br>')
     } 
    if (val == 'LES-32V01M' ){
        block2.style.display = 'block';
        block2.innerHTML = LES_32V01M.join('<br>')
     } 
 }

@klyapa · 20.11.2022, 00:34

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<table  cellpadding="10" cellspacing="5"> <!--Табличка просто позиционирует поля-->
    <tbody>
        <tr>
            <td>
                <label for="BR_tv">Введите бренд :</label> <!--Поле для ввода бренда-->
                <input id="brn" list="dtl_br" value="" onchange="brand(this.value)" />
                <datalist id="dtl_br"></datalist>
            </td>
            <td>
                <div id="dm_blok" style="display:none;"> <!--скрывающийся блок-->
                    <label for="MD_tv">Введите модель:</label> <!--второе поле, выбор модели-->
                    <input id="mod" list="dtl_md" value="" onchange="model(this.value)" />
                    <datalist id="dtl_md"></datalist>
                </div>
            </td>
        </tr>
    </tbody>
</table>
 
<div id="op_blok"  style="display:none;"></div> <!--блок с описанием-->

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
const data = {
    myBR: ['Akai', 'BBK', 'LG', 'Philips', 'Samsung'], // массив брендов
    Akai: ['LEA-32M19P', 'LES-32V01M'],
    BBK: ['24Y32', 'LEM-32E15', 'LED-19T40', '42LE8700'],
    LG: ['26LN250', '32LB560', '40ES5052', '47H4200'],
};
 
const dataMod = {
    'LEA-32M19P': ["Akai LEA-32M19P здесь описание ", "примерно небольшой абзац"],
    'LES-32V01M': ["Akai LES-32V01M здесь тоже описание ", "и таких будет еще много"],
};
 
const idElems = ['dtl_br', 'dtl_md', 'dm_blok', 'op_blok', 'brn', 'mod'];
const [br, md, block, block2, brn, mod] = idElems.map(id => document.getElementById(id));
 
data.myBR.forEach(m => br.append(new Option('', m)));
 
function brand(val) {
    md.innerHTML = '';
    block2.innerHTML = '';
    mod.value = '';
    if(data[val]) {
        data[val].forEach(m => md.append(new Option('', m)));
        block.style.display = 'block';
    } else {
        block.style.display = 'none';
    }
}
 
function model(val) {
    if(dataMod[val]) {
        block2.innerHTML = dataMod[val].join('<br>');
        block2.style.display = 'block';
    } else {
        block2.style.display = 'none';
        block2.innerHTML = '';
    }   
}

@Женек17 · 20.11.2022, 01:03 **[ТС]**

Огромное спасибо , все четко!

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Женек17 1 / 1 / 0 Регистрация: 18.11.2022 Сообщений: 5
	20.11.2022, 01:03 [ТС]
	Огромное спасибо , все четко! 0

Вывести один из массивов соответствующий значению value

Решение