Linked metabox options

3 Views

Is it possible to construct a metabox, that has several options that are linked?

Say I have 3 selections to choose from, with several options:

Read More

Selection 1: A1, A2, A3, A4

Selection 2: B1, B2, B3, B4, B5

Selection 3: C1, C2, C3

Now, when I select A1 option, the only available options from two other selections are for instance B2, B4, B5 and C1. And so on, for various options.

The thing is that I can easily create those options, and then just put in a description saying what option can go with what other options. Say you selected A1 and B1, but B1 won’t work, so you shouldn’t select it, I can just write that down, but I think that’s not so user friendly, and people are sometimes lazy to read, so it’s just easier to limit out those options.

Can it be done? And how? HTML manipulating or within PHP with switch or if-else-if statements?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. You need chained selections, here’s a simple example

    $("#main").change(function(){
    $('.chain').fadeOut('slow');
    switch( $(this).val() ){
        case 'tutorials':
            $('#tutorials').fadeIn('fast');
            break;
        case 'articles':
            $('#articles').fadeIn('fast');
            break;
    }
});
    body {
    padding:30px;
    background-color: #D4DE8C;
}
select {
    float:left;
    clear:both;
    margin: 5px;
}
.chain {
    display:none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="main">
    <option value="blog">Blog</option>
    <option value="tutorials">Tutorials</option>
    <option value="articles">Articles</option>
</select>
<select id="tutorials" class="chain">
    <option value="jquery">JavaScript » jQuery</option>
    <option value="codeigniter">PHP » CodeIgniter</option>
    <option value="wordpress">PHP » WordPress</option>
    <option value="xhtml-css">XHTML/CSS</option>
</select>
<select id="articles" class="chain">
    <option value="security">Articles » Security</option>
    <option value="design">Articles » Design</option>
</select>

    And here’s an example using Ajax.