将短代码添加到 p 元素并重新加载它

Question

我试图在页面加载后向页面添加简码，这是我的要求

1- 当我 select 来自 select 元素的选项时，将短代码添加到 p 元素。

** 在这里，我能够将短代码添加为文本，但我没有从中获得预期值，这是因为页面已加载，所以我必须加载具有该短代码的元素。

2-加载简码的元素，但它必须有新添加的简码

** 因为当你重新加载元素时，如果你只是重新加载元素，你在第 1 点所做的所有操作都将被删除。

这是代码

<form action=""><label for="">خزنات الروايات المتوفرة</label><select id="select_novel" onchange="gAj()">
<option value="Youjo Senki">ملحمة تانيا الاثمة</option>
<option value="Isaac">اسحاق</option>
</select></form>

<p id="g_a" style="text-align: center;"></p>

<script>
function gAj() {
    var x = document.getElementById("select_novel").value;

    document.getElementById("g_a").innerHTML = `[mycred_my_balance user_id="${x}" title="لدى خزنة الرواية الأن"]`;
    }

我试过的代码

我尝试在此处添加 PHP 代码但不起作用，将显示“意外令牌‘<’”

// var php_c = <?php echo do_shortcode(`[mycred_my_balance user_id="${x}" title="لدى خزنة الرواية الأن"]`); ?>

我试图通过这种方式重新加载元素，但它没有用..看点 2

// $("#g_a").load(location.href+" #g_a>*","");

Answer 1

1- HTML列表

<select id="select_novel" onchange="gAj()">
  <option value="kol 1">option 1</option>
  <option value="kol 2">option 2</option>
</select>

2- 为 HTML 中的所有选项添加短代码并隐藏它们并有 2 个类

class 1 将获得两个包含隐藏短代码的所有 div。

class 2 将等于所选选项值，但（空格“”）将替换为“_”。

<div style="display: none;" class="gol kol_1">[mycred user_id="kol 1"]</div>
<div style="display: none;" class="gol kol_2">[mycred user_id="kol 2"]</div>

3- javascript 代码

<script>
0- the function work only when you chose an option or rechose again
function gAj() {
  var pToHide = document.getElementsByClassName('gol');
  for(var i = 0; i < pToHide.length; i++){
      pToHide[i].style.display = "none";
  }
  var x = document.getElementById("select_novel").value;
  var x_r = String(x).replaceAll(" ","_");
  document.querySelector(`.${x_r}`).style.display = "block";
  }
</script>

我不想再解释 javascript 所以最后一件事谢谢你@CBroe 他给了我提示让我找到这个解决方案并感谢所有帮助像我这样的菜鸟的人。