How to access selected dropdownlist without using angular, j query, or java script?

Question

How to access selected "dropdown list" without using angular, jquery, or javascript?

At first, or runtime the status of items are >> "display: none" which means they are hidden.

Now, how to change status from "display:none" to "display: block" for each item separately by using selected option in <select><option/></select>?

NB: I have to use only "HTML" & "CSS". for example, these main and whose details depend on the selected item from the dropdown list:

    <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>

Our Site: palizafzar.com

Duplicate? [https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option](https://stackoverflow.com/questions/16344583/style-select-element-based-on-selected-option) — Rob Moll, Aug 04 '20 at 16:08

Chris W. · Accepted Answer · 2020-08-04T16:31:53.300

If I'm understanding your intent correctly, you can utilize element states and selectors like this if your only actual abilities are restricted to purely HTML/CSS, hope it helps, cheers!

Oh and PS, Angular & Jquery compiles to javascript just an 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>

How to access selected dropdownlist without using angular, j query, or java script?

1 Answers1