javascript - How to display select options on alpinejs - Stack Overflow

admin管理员组

文章数量:1426385

So Im working with alpinejs and I want to make a "select" where the options e from an alpinejs x-data that returns an array of nodes. I know how to do it in vanilla js where you just need to create a loop and then append those elements to the parent element. But have no clue of how to do it in alpine since Ive tried different options and none are working.

<div x-data="{ options: $el.querySelectorAll('.m-tab__title') }">
 <select class="w-full md:hidden">
        <template x-for="option in options">
            <option x-html="option"></option>
        </template>
 </select>...

That just doesnt display any content in the select but [object HTMLDivElement].

 <div x-data="{ options: $el.querySelectorAll('.m-tab__title') }">
     <select class="w-full md:hidden">
            <template x-for="option in options">
                <option x-text="option.innerText"></option>
            </template>
     </select>...

While that displays just the inner Text of each option but not even inside a proper select.

Any way I can display each option as a select option?

Thanks!

So Im working with alpinejs and I want to make a "select" where the options e from an alpinejs x-data that returns an array of nodes. I know how to do it in vanilla js where you just need to create a loop and then append those elements to the parent element. But have no clue of how to do it in alpine since Ive tried different options and none are working.

<div x-data="{ options: $el.querySelectorAll('.m-tab__title') }">
 <select class="w-full md:hidden">
        <template x-for="option in options">
            <option x-html="option"></option>
        </template>
 </select>...

That just doesnt display any content in the select but [object HTMLDivElement].

 <div x-data="{ options: $el.querySelectorAll('.m-tab__title') }">
     <select class="w-full md:hidden">
            <template x-for="option in options">
                <option x-text="option.innerText"></option>
            </template>
     </select>...

While that displays just the inner Text of each option but not even inside a proper select.

Any way I can display each option as a select option?

Thanks!

• javascript
• dom
• tailwind-css
• dom-manipulation
• alpine.js

Share Improve this question Follow edited Jun 8, 2021 at 5:53 valiano 18.7k77 gold badges7171 silver badges8383 bronze badges asked Jun 5, 2021 at 10:10 Ger Ger 2111 gold badge11 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Are you sure your options array contain valid data?

If unsure you could always add x-init="console.log(options);" to your "x-data div"

I made a quick working example here: https://codepen.io/outoforbit/pen/JjWaJKN

<div x-data="{ selectedOption: 'option1', 
         options: [ 
            'option1',
            'option2', 
            'option3'
         ]}">
<div class="w-80 flex pr-3">
    <p class="w-1/2">Select option:</p>
    <div class="w-1/2 inline-block relative">
        <select name="my_option" x-model="selectedOption" class="">
            <template x-for="option in options" :key="option">
                <option :value="option" x-text="option"></option>
            </template>
        </select>
    </div>
</div>

Select option:

本文标签： javascriptHow to display select options on alpinejsStack Overflow