#javascript #html #jquery #css
#язык JavaScript #HTML #jquery #CSS
Вопрос:
Я хотел бы показывать/скрывать дивы при выборе опции из выбора. Но этот выбор находится в дизайне материалов, поэтому он не является классическим выбором, поэтому .change() не работает.
С кодом, который я ввел, если я выберу один из вариантов, ничего не произойдет, но если я обновлю страницу, соответствующий DIV будет виден, в то время как остальные останутся скрытыми.
Я хочу сделать так, чтобы при выборе одного из них отображался соответствующий DIV, а другой был скрыт, и наоборот, без перезагрузки страницы.
$('.mdc-card__details ~ div').each(function () { $(this).addClass('hidden'); }); const role = new mdc.select.MDCSelect(document.querySelector('.demo-width-class')); role.listen('change', () =gt; { document.getElementById('business-type').value = role.value; }); switch (role.value){ case "Etablissement équestre":{$(".etabliEquestre").removeClass("hidden");break;} case "Moniteur d'équitation":{$(".moniteurEquitation").removeClass("hidden");break;} } .mdc-card__details gt; div { display: grid; grid-template-columns: 33% 67%; border-bottom: 2px solid var(--blanc-casse); padding: calc(0.3 * var(--spacing)) 0; } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.js"gt;lt;/scriptgt; lt;link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.css" rel="stylesheet"/gt; lt;div class="mdc-card__details"gt; lt;divgt; lt;pgt;Activitélt;/pgt; lt;div class="type"gt; lt;div class="mdc-select mdc-select--filled demo-width-class" data-mdc-auto-init="MDCSelect"gt; lt;input id="business-type" name="type" type="hidden" /gt; lt;div aria-expanded="false" aria-haspopup="listbox" aria-labelledby="demo-label demo-selected-text" class="mdc-select__anchor" role="button"gt;lt;span class="mdc-select__ripple"gt;lt;/spangt; lt;span class="mdc-floating-label" id="demo-label"gt;Corps de métierslt;/spangt;lt;span class="mdc-select__selected-text-container"gt; lt;span class="mdc-select__selected-text" id="demo-selected-text"gt;lt;/spangt; lt;/spangt; lt;span class="mdc-select__dropdown-icon"gt; lt;svg class="mdc-select__dropdown-icon-graphic" focusable="false" viewbox="7 10 10 5"gt; lt;polygon class="mdc-select__dropdown-icon-inactive" fill-rule="evenodd" points="7 10 12 15 17 10" stroke="none"gt; lt;/polygongt; lt;polygon class="mdc-select__dropdown-icon-active" fill-rule="evenodd" points="7 15 12 10 17 15" stroke="none"gt; lt;/polygongt; lt;/svggt; lt;/spangt; lt;span class="mdc-line-ripple"gt;lt;/spangt;lt;/divgt; lt;div class="mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" id="type" multiple="multiple" size="3"gt; lt;ul aria-label="Liste corps de métiers" class="mdc-list" id="selectType" role="listbox"gt; lt;li aria-selected="true" class="mdc-list-item mdc-list-item--selected" data-value="" role="option"gt;lt;span class="mdc-list-item__ripple"gt;lt;/spangt;lt;/ligt; lt;li aria-selected="false" class="mdc-list-item" data-value="Etablissement équestre" role="option"gt;lt;span class="mdc-list-item__ripple"gt;lt;/spangt; lt;span class="mdc-list-item__text"gt; Etablissement équestre lt;/spangt;lt;/ligt; lt;li aria-selected="false" class="mdc-list-item" data-value="Moniteur d'équitation" role="option"gt;lt;span class="mdc-list-item__ripple"gt;lt;/spangt; lt;span class="mdc-list-item__text"gt; Moniteur d'équitation lt;/spangt;lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="etabliEquestre"gt; lt;div class="mdc-card__details"gt; lt;divgt; lt;pgt;Type de structurelt;/pgt; lt;divgt;[[Structure]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Activitéslt;/pgt; lt;divgt;[[Activity]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Infrastructureslt;/pgt; lt;pgt;lt;/pgt; lt;pgt;Manègeslt;/pgt; lt;divgt;[[Manage]]lt;/divgt; lt;pgt;Carrièreslt;/pgt; lt;divgt;[[Career]]lt;/divgt; lt;pgt;Boxeslt;/pgt; lt;divgt;[[Box]]lt;/divgt; lt;pgt;Stabulationslt;/pgt; lt;divgt;[[Stall]]lt;/divgt; lt;pgt;Sellerieslt;/pgt; lt;divgt;[[Upholstery]]lt;/divgt; lt;pgt;Autreslt;/pgt; lt;divgt;[[OtherInstallation]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Disciplineslt;/pgt; lt;divgt;[[Discipline]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Pensionslt;/pgt; lt;divgt;[[Pension]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Equipe d'encadrementlt;/pgt; lt;divgt;[[ManagementTeam]]lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="moniteurEquitation"gt; lt;div class="mdc-card__details"gt; lt;divgt; lt;pgt;Serviceslt;/pgt; lt;divgt;[[Service]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Disciplineslt;/pgt; lt;divgt;[[Discipline]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Levellt;/pgt; lt;divgt;[[LevelTaught]]lt;/divgt; lt;/divgt; lt;divgt; lt;pgt;Diplômeslt;/pgt; lt;divgt;[[Diploma]]lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;