Как получить доступ к выбранному раскрывающемуся списку без использования angular, j query или java скрипта?

Question

Как получить доступ к выбранному «раскрывающемуся списку» без использования angular, jquery или javascript?

Сначала или во время выполнения статус элементов >> "display: none", что означает, что они скрыты.

Теперь, как изменить статус с "display:none" на "display: block" для каждого элемента отдельно, используя выбранную опцию в <select><option/></select>?

NB : Мне нужно использовать только «HTML» и «CSS». например, эти основные и детали которых зависят от выбранного элемента из раскрывающегося списка:

    <div class="table-bordered img-rounded mar-btm-20 collapse" id="SalesExpert">
<div class="mar-right-20">
<h4>شرایط و پیش نیاز استخدام کارشناس فروش</h4>

<ul>
    <li>دارای انگیزه ی ذاتی و عاشق حرفه فروش</li>
    <li>اعتماد به نفس بالا</li>
    <li>دارای نظم و انضباط ، روش و قاعده کاری</li>
    <li>ذاتا دارای استعداد فروشندگی</li>
    <li>توانایی برقراری ارتباط با مشتریان</li>
    <li>مسلط به مهارت مذاکره و مدیریت جلسات فروش</li>
    <li>فن بیان بالا و آشنا با تکنیک های زبان بدن</li>
</ul>
</div>
</div>

Наш сайт: palizafzar.com

Answer 1

• 1000 PS, Angular & Jquery компилируется в javascript просто FYI

ul li {
  display: none;
}

#cb1:checked ~ ul li:nth-child(1),
#cb2:checked ~ ul li:nth-child(2),
#cb3:checked ~ ul li:nth-child(3),
#cb4:checked ~ ul li:nth-child(4),
#cb5:checked ~ ul li:nth-child(5),
#cb6:checked ~ ul li:nth-child(6),
#cb7:checked ~ ul li:nth-child(7)
{
  display: block;
}

<p>Click a checkbox to add / remove the associated item</p>

<input id="cb1" type="checkbox"><label for="cb1">Click 1</label>
<input id="cb2" type="checkbox"><label for="cb2">Click 2</label>
<input id="cb3" type="checkbox"><label for="cb3">Click 3</label>
<input id="cb4" type="checkbox"><label for="cb4">Click 4</label>
<input id="cb5" type="checkbox"><label for="cb5">Click 5</label>
<input id="cb6" type="checkbox"><label for="cb6">Click 6</label>
<input id="cb7" type="checkbox"><label for="cb7">Click 7</label>

<br>

<ul>
  <li>دارای انگیزه ی ذاتی و عاشق حرفه فروش</li>
  <li>اعتماد به نفس بالا</li>
  <li>دارای نظم و انضباط ، روش و قاعده کاری</li>
  <li>ذاتا دارای استعداد فروشندگی</li>
  <li>توانایی برقراری ارتباط با مشتریان</li>
  <li>مسلط به مهارت مذاکره و مدیریت جلسات فروش</li>
  <li>فن بیان بالا و آشنا با تکنیک های زبان بدن</li>
</ul>