javascript - 在选择的下拉选项上显示 div

Question

我想在用户从下拉列表中选择一个选项时显示一个 div。它适用于本地主机和代码笔，但是当我将代码上传到我域的服务器时它不起作用..

我正在努力解决这个问题，不知道为什么这不起作用。

代码很长，所以我没有在这里分享。

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();
    });

代码笔(有效) http://codepen.io/anon/pen/aOGvJq

Answer 1

原因是:我猜你没有在你的网站上包含 jQuery 脚本。将此代码添加到您页面的标记中。

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

但是请查看我在服务器上托管的这个实时页面，以向您展示演示。

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