Два селекта, при выборе в первом определенный пункт, показываем во втором селекте привязанные пункты к варианты первого селекта, как сделать?

Question

[Антон Вебсайтовский]

Всем привет.

Есть два селекта:
Первый Категории тс.
Второй ПТО.

Как при выборе в первом селекте одного из пункта, надо чтобы первая буква учитывалась допустим выбрали А | (L - Мототранспортные средства), в ПТО показывались только те варианты где идет первая буква A |

Выбрал я в первом селекте А |, значит во втором я вижу все варианты где А |

Рабочий пример:
jsfiddle.net/vlit/m72w5uob/23

Comments

[Сергей Сергей]

(function self(sopts,popt,ltr) {
  ltr = popt.selectedOptions[0].innerText[0];
  sopts.forEach( op=> op.disabled = op.innerText.startsWith( ltr ) );
  setTimeout( self, 1000, sopts, popt );
})( document.querySelectorAll( 'select#pto option' ), document.querySelector('select#catts') );

[Антон Вебсайтовский]

Сергей Сергей, спасибо, так работает, он он нужные варианты для выбора на оборот не показывает, а надо чтоб показывал нужные, а не нужные отключал jsfiddle.net/vlit/m72w5uob/27

[Сергей Сергей]

Тут надо думать, я не знаю.

[Антон Вебсайтовский]

Сергей Сергей, так ты сделал же, работает, ток ты щас скрываешь варианты те которые в пто надо показывать, то есть скрываешь, делаешь их дисэйбал, а надо на оборот все другие делать тдисэйбал.

[Сергей Сергей]

Это будет самостоятельная работа для страждущих.

[Антон Вебсайтовский]

Сергей Сергей, не на столько я селен, в этом коде не все понимаю ) только setTimeout

[Сергей Сергей]

делаешь их дисэйбал

op.disabled

Писать и читать умеешь, всё получится.

[Антон Вебсайтовский]

Сергей Сергей, да это я тож понял, я делаю disabled выбранные, а мне надо сделать все кроме выбранных )
op. это что?

[Антон Вебсайтовский]

Мне подсказали уже

sopts.forEach( op=> op.disabled = !op.innerText.startsWith( ltr ) );

Поставил перед op. !

[Антон Вебсайтовский]

Вот еще такой вариант, где при выборе в первом селекте, чистим во втором селекте выбранный вариант до этого.
Тут через change.

jsfiddle.net/vlit/m72w5uob/50

и если у кого не чиститься выбор во втором селекте, при смене в первом селекте.
попробуйте: $('#pto').val(0).trigger("change");

Answer 1

[Adamos]

Гуглим все многообразие решений по словосочетанию chained select.