Javascript Wordpress-在JS中添加短代码，但它没有'；不渲染

我有一个问题，我试图根据用户从“选择”字段/下拉菜单中的选择来更改已定义画布的HTML内容

<select id="menu-selection">
   <option class="menuOption">Main Menu</option>
   <option class="menuOption">Lunch Menu</option>
   <option class="menuOption">Sandwich Menu</option>
   <option class="menuOption">Children's Menu</option>
   <option class="menuOption">Vegan Menu</option>
   <option class="menuOption">Gluten-Free Menu</option>
   <option class="menuOption">Dessert Menu</option>
   <option class="menuOption">Afternoon Tea</option>
   <option class="menuOption">Party Buffet Menu</option>
   <option class="menuOption">Party Set Menu</option>
   <option class="menuOption">Coffee Menu</option>
   <option class="menuOption">Cocktail Menu</option>
   <option class="menuOption">Milkshakes</option>
   <option class="menuOption">Wine Menu</option>
</select>

<div id="menu-canvas">
    [elementor-template id="218"]
</div>

主菜单
午餐菜单
三明治菜单
儿童菜单
素食菜单
无麸质菜单
甜点菜单
下午茶
派对自助餐菜单
派对套餐
咖啡菜单
鸡尾酒会菜单
奶昔
葡萄酒菜单
[elementor template id=“218”]

我通过使用JS switch语句来实现这一点，因此在每种情况下，画布内容都会通过JS中的“.innerHTML”方法更改为相应的模板短代码

<script>    
sel = document.getElementById("menu-selection");
    canvasChoice = document.getElementById("menu-canvas");
    
    
    sel.addEventListener('change', function(){
       idx = sel.selectedIndex;
       // Log for debugging
    //   console.log(idx);
    
       switch(idx){
       case 0: canvasChoice.innerHTML = '[elementor-template id="218"]'; break;
       case 1: canvasChoice.innerHTML = '[elementor-template id="226"]'; break;
       case 2: canvasChoice.innerHTML = '[elementor-template id="229"]'; break;
       case 3: canvasChoice.innerHTML = '[elementor-template id="232"]'; break;
       case 4: canvasChoice.innerHTML = '[elementor-template id="319"]'; break;
       case 5: canvasChoice.innerHTML = '[elementor-template id="349"]'; break;
       case 6: canvasChoice.innerHTML = '[elementor-template id="235"]'; break;
       case 7: canvasChoice.innerHTML = '[elementor-template id="311"]'; break;
       case 8: canvasChoice.innerHTML = '[elementor-template id="314"]'; break;
       case 9: canvasChoice.innerHTML = '[elementor-template id="323"]'; break;
       case 10: canvasChoice.innerHTML = '[elementor-template id="238"]'; break;
       case 11: canvasChoice.innerHTML = '[elementor-template id="242"]'; break;
       case 12: canvasChoice.innerHTML = '[elementor-template id="850"]'; break;
       case 13: canvasChoice.innerHTML = '[elementor-template id="926"]'; break;
       default: break;
    }
    });
</script>

sel=document.getElementById（“菜单选择”）；
canvasChoice=document.getElementById（“菜单画布”）；
sel.addEventListener（'change'，function（）{
idx=sel.selectedIndex；
//调试日志
//console.log（idx）；
交换机（idx）{
案例0:canvasChoice.innerHTML='[elementor template id=“218”]'；中断；
案例1:canvasChoice.innerHTML='[elementor template id=“226”]'；中断；
案例2:canvasChoice.innerHTML='[elementor template id=“229”]'；中断；
案例3:canvasChoice.innerHTML='[elementor template id=“232”]'；中断；
案例4:canvasChoice.innerHTML='[elementor template id=“319”]'；中断；
案例5:canvasChoice.innerHTML='[elementor template id=“349”]'；中断；
案例6:canvasChoice.innerHTML='[elementor template id=“235”]'；中断；
案例7:canvasChoice.innerHTML='[elementor template id=“311”]'；中断；
案例8:canvasChoice.innerHTML='[elementor template id=“314”]'；中断；
案例9:canvasChoice.innerHTML='[elementor template id=“323”]'；中断；
案例10:canvasChoice.innerHTML='[elementor template id=“238”]'；break；
案例11:canvasChoice.innerHTML='[elementor template id=“242”]'；中断；
案例12:canvasChoice.innerHTML='[elementor template id=“850”]'；中断；
案例13:canvasChoice.innerHTML='[elementor template id=“926”]'；中断；
默认：中断；
}
});

内容可以正确更改，但短代码实际上并没有生成它应该生成的模板，而是以文本的形式呈现

我曾尝试用PHP编写do_短代码，但没有成功

---

有什么建议吗？

在“do\u Shortcode（）”方法中，通过wordpress，Shortcode只能在服务器端工作。直接使用javascript是不可行的。但是使用ajax，您可以将php文件异步添加到页面，而无需刷新页面。这里有一个很好的参考来了解更多

---

短代码不会以这种方式工作，您需要使用xmlhttprequest在PHP中呈现短代码，然后在JS中使用响应。