Javascript 选择项目后在下拉菜单中更改按钮innerHTML

我使用alpineJs显示带有标志的语言选择器

选择另一种语言后，我需要更改按钮的内容（语言+标志），我不知道如何在按钮和下拉菜单项之间链接，活动语言不应出现在下拉菜单中

法国

这是工作代码。从你这边检查一下

<div class="w-1/3 mx-auto relative" x-data="{ 
             langSelector: false, 
             activeLang : 0,
             langs : [
             { id: 0, title: 'Français', abv: 'fr' },
             { id: 1, title: 'English', abv: 'en' },
             { id: 2, title: 'Español', abv: 'es' }
             ] 
             }">
    <button class="w-full hb:w-4/5 flex items-center px-4 py-3 text-gray-900 bg-gray-300 rounded-sm cursor-pointer focus:outline-none" x-on:click="langSelector = true"> <img class="w-4 inline-block rounded-sm" :src="'https://media.flaticon.com/dist/min/img/flags/' + langs[activeLang].abv + '.svg'"> <span class="ml-2 font-medium" x-html=[langs[activeLang].title]>Français</span>
        <svg class="w-3 h-3 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path>
        </svg>
    </button>
    <ul class="w-full absolute left-0 hb:w-4/5 py-1 pb-2 px-4 bg-gray-900 text-white font-normal rounded-sm" x-cloak x-show.transition.origin.top="langSelector" x-on:click.away="langSelector = false">
        <template x-for="lang in langs" :key="lang.id">
            <li class="pt-2" :id="lang.id" @click="activeLang = lang.id, langSelector = false" x-show="activeLang != lang.id">
                <a href="#" class="flex items-center hover:text-green-100 hover:font-medium"> <img class="w-4 inline-block rounded-sm" :src="`https://media.flaticon.com/dist/min/img/flags/${lang.abv}.svg`"> <span class="ml-2" x-text="lang.title"></span> </a>
            </li>
        </template>
    </ul>
</div>

法国

它不起作用，我需要使它看起来像一个select。如果单击select，它将不会在下拉列表中显示所选国家/地区。这不是您想要的吗？第一次单击“选择”按钮会显示其他语言，我需要在buttonI更新的解决方案中显示所选语言。它将完美地工作。检查一下你这边。