<div x-data="{ selectedCountry: '' }">
    <label for="country">Select your country:</label>
    <select id="country" x-model="selectedCountry">
        <option value="">Please select</option>
        <option value="Thailand">Thailand</option>
        <option value="Japan">Japan</option>
        <option value="USA">USA</option>
    </select>
    <p>Your selected country: <span x-text="selectedCountry || 'None'"></span></p>
</div>

<div x-data="{ countries: ['Thailand', 'Japan', 'USA'], selectedCountry: '' }">
    <label for="dynamicCountry">Select your country:</label>
    <select id="dynamicCountry" x-model="selectedCountry">
        <option value="">Please select</option>
        <template x-for="country in countries" :key="country">
            <option x-text="country" :value="country"></option>
        </template>
    </select>
    <p>Your selected country: <span x-text="selectedCountry || 'None'"></span></p>
</div>

<div x-data="{ selectedFruits: [] }">
    <label for="fruits">Select your favorite fruits:</label>
    <select id="fruits" x-model="selectedFruits" multiple>
        <option value="Apple">Apple</option>
        <option value="Banana">Banana</option>
        <option value="Cherry">Cherry</option>
    </select>
    <p>Selected fruits:</p>
    <ul>
        <template x-for="fruit in selectedFruits" :key="fruit">
            <li x-text="fruit"></li>
        </template>
    </ul>
</div>

<div x-data="{ selectedPlan: {}, plans: [
    { id: 1, name: 'Basic Plan' },
    { id: 2, name: 'Premium Plan' }
] }">
    <label for="plan">Select your plan:</label>
    <select id="plan" x-model="selectedPlan">
        <option value="">Please select</option>
        <template x-for="plan in plans" :key="plan.id">
            <option :value="plan" x-text="plan.name"></option>
        </template>
    </select>
    <p x-text="selectedPlan.name ? `Selected Plan: ${selectedPlan.name}` : 'No plan selected'"></p>
</div>

<div x-data="{ selectedAgeGroup: 0 }">
    <label for="age">Select your age group:</label>
    <select id="age" x-model.number="selectedAgeGroup">
        <option value="0">Select your age group</option>
        <option value="18">18-25</option>
        <option value="26">26-35</option>
        <option value="36">36-45</option>
    </select>
    <p>Your selected age group: <span x-text="selectedAgeGroup || 'None'"></span></p>
</div>

<div x-data="{ selectedOption: '' }">
    <label for="options">Choose an option:</label>
    <select id="options" x-model="selectedOption">
        <option value="">Select an option</option>
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
    </select>
    <p x-show="!selectedOption">Please select an option.</p>
    <p x-show="selectedOption" x-text="`You selected: ${selectedOption}`"></p>
</div>