<script type="text/javascript">
require(['jquery'], function($) {
$(document).ready(function() {
$("select").on('change', function() {
$(this).find("option:selected").each(function() {
var geeks = $(this).attr("value");
if (geeks) {
$(".GFG").not("." + geeks).hide();
$("." + geeks).show();
} else {
$(".GFG").hide();
}
});
}).change();
});
});
</script>
<div>
Show me ranges for:
<select>
<option value='select' selected>Please select</option>
<option value="cars">Cars</option>
<option value="bikes">Bikes</option>
<option value="cycles">motor cycles</option>
</select>
<div class='select GFG'>
<?php echo $this->getLayout()->createBlock("MagentoFrameworkViewElementTemplate")->setTemplate("Mani_Popup::allmenu.phtml")->toHtml() ?>
</div>
<div class='cars GFG' >
<?php echo $this->getLayout()->createBlock("MagentoFrameworkViewElementTemplate")->setTemplate("Mani_Popup::cars.phtml")->toHtml() ?>
</div>
<div class='bikes GFG' >
<?php echo $this->getLayout()->createBlock("MagentoFrameworkViewElementTemplate")->setTemplate("Mani_Popup::bikes.phtml")->toHtml() ?>
</div>
<div class='cycle GFG' >
<?php echo $this->getLayout()->createBlock("MagentoFrameworkViewElementTemplate")->setTemplate("Mani_Popup::cycles.phtml")->toHtml() ?>
</div>
</div>
i used this solution. its working fine. But sometimes what happening is when i come to this page, even though “Please select” option selected that data specific to the “Please select” is not showing. But once i refresh the page the data is showing fine.
How to rectify this.
Any help can be appreciated..