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

Show me ranges for: 
       <option value='select' selected>Please select</option>
       <option value="cars">Cars</option>
       <option value="bikes">Bikes</option>
       <option value="cycles">motor cycles</option>

    <div class='select GFG'>
        <?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Mani_Popup::allmenu.phtml")->toHtml() ?>
    <div class='cars GFG' >
        <?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Mani_Popup::cars.phtml")->toHtml() ?>
    <div class='bikes GFG' >
        <?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Mani_Popup::bikes.phtml")->toHtml() ?>
    <div class='cycle GFG' >
        <?php echo $this->getLayout()->createBlock("Magento\Framework\View\Element\Template")->setTemplate("Mani_Popup::cycles.phtml")->toHtml() ?>

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.

When the user come this page i need to show all data first then based on dropdown selection i need to show specific data.

How to achive this.

Any help can be appreciated..


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.