Hide and show partials based on chosen option in a select.

@phpMick You’ll need to load all the partials as Blade templates are generated server-side. You’ll then need to somehow “bind” a select option to something like a div tag, and when an option is selected show the corresponding div and hide the others.

Can be as simple as:

<select id="options">
    <option value="">Choose:</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="option" id="option-1">
    <p>Content for option #1</p>
</div>
<div class="option" id="option-2">
    <p>Content for option #2</p>
</div>
<div class="option" id="option-3">
    <p>Content for option #3</p>
</div>

$('#options').on('change', function (e) {
    $('.option').hide();
    $('#option-' + e.target.value).show();
});

In my opinion, Vue would be cleaner than jQuery here. You don't have to construct all the options on your own (you could, of course, also build them with jQuery, but it gets very messy), and you don't have to worry about hiding the forms/form options (using v-if will hide it from the user's view and the actual HTML until it's needed again, as opposed to jQuery's .hide()/.show()).

Here's an example of how it could work in Vue:

<div id="app">
    <select v-model="selectedFood">
        <option value="">Select one:</option>
        <option v-for="food in foods" :key="food.id" :value="food.id">{{ food.name }}</option>
    </select>
    <br />
    <br />
    <ul>
        <li v-for="food in foods" :key="food.id" v-if="food.id === selectedFood">
            You selected: {{ food.name }}
        </li>
    </ul>
</div>

new Vue({
    el: '#app',
    data: {
        selectedFood: '',
        foods: [
            { id: 1, name: 'Apples' },
            { id: 2, name: 'Oranges' },
            { id: 3, name: 'Bananas' },
        ],
    },
});

If you're fetching it from a database, your Vue instance might look like this (using some ES6 syntax):

new Vue({
    el: '#app',
    data: {
        selectedFood: '',
        foods: [],
    },
    mounted() {
        axios
            .get('/path/to/foods/data')
            .then(response => this.foods = response.data)
            .catch(response => {
                console.error(response);
                alert('Whoops, something went wrong.');
            });
    },
});

And here's a jsfiddle link if you wanna see the first example in action. :)

extending @martinbean's solution, assuming $partials is an array of partial view names:

@foreach($partials as $partial)
    <div class="option" id="option-$loop->iteration">
        @include($partial);
    </div>
@endforeach 

<select id="options">
    <option value="">Choose:</option>
    @foreach($partials as $partial)
        <option value="$loop->iteration">$partial</option>
    @endforeach
</select>

$('#options').on('change', function (e) {
    $('.option').hide();
    $('#option-' + e.target.value).show();
});

Choose between having to make ajax calls to fetch each partial or having to render every partial on the initial load.

Thanks all, nice to see example of both.

Cheers.