在选择下拉选项上显示div

Question

I want to show a div when the user select a option out the dropdown. It works on localhost and with codepen but when I upload the code to the server of my domain it doesn't work..

I'm struggling with this problem and have no idea why this doesn't work.

The code is very long, thats why I didn't share it here.

HTML:

 <select>
                <option>choose a option</option>
                <option value="test1">test 1</option>
                <option value="test2">test 2</option>
            </select>

            <div class="test1 pricebox"><strong>test1 - test2</strong> <h1>€27,50</h1></div>
            <div class="test2 pricebox"><strong>test2 - test1</strong> <h1>€27,50</h1></div>

JS

$(document).ready(function(){
        $("select").change(function(){
        $(this).find("option:selected").each(function(){
        if($(this).attr("value")=="test1"){
            $(".pricebox").not(".test1").hide();
            $(".test1").show();
        }
        else if($(this).attr("value")=="test2"){
            $(".pricebox").not(".test2").hide();
            $(".test2").show();
        }
        else{
            $(".pricebox").hide();
        }
        });
    }).change();
    });

The codepen (it works) http://codepen.io/anon/pen/aOGvJq

Answer 1

The reason is : you're not including the jQuery script on your website I guess. Add this code in the tag of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script>

However check this live page I hosted this on server to show you demo.

http://shehroz.pixub.com/stack.html