Wordpress Dropdown Metabox

Question

Okay so I need some help. I would like there to be a dropdown metabox on a custom post on my wp site. I can get this working, but I now need to find a way of displaying different content depending on results. Here is some code I found on how to get different content to display, but how do I get this working through Metabox as the dropdown box will not be in the post.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Selectbox</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select").change(function(){
            $( "select option:selected").each(function(){
                if($(this).attr("value")=="red"){
                    $(".box").hide();
                    $(".red").show();
                }
                if($(this).attr("value")=="green"){
                    $(".box").hide();
                    $(".green").show();
                }
                if($(this).attr("value")=="blue"){
                    $(".box").hide();
                    $(".blue").show();
                }
            });
        }).change();
    });
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

Anyone know how?

Answer 1 · 2014-06-23T18:34:50Z

June 23, 2014 6:34pm

Hi,

I'm wondering if it may be simpler to try to use Advanced Custom Fields rather than coding this yourself since it is going to involve a lot more code. Would just this work for you? http://www.advancedcustomfields.com/resources/field-types/select/

Welcome to the Treehouse Community

Looking to learn something new?

Aled Evans

Aled Evans

Wordpress Dropdown Metabox

1 Answer

Zac Gordon

Zac Gordon