如何使用带有select onchange的条件语句在javascript函数中返回html代码

Posted 2023-05-09

【中文标题】如何使用带有select onchange的条件语句在javascript函数中返回html代码

【英文标题】：How to return html code in a javascript function with conditional statements with select onchange

【发布时间】：2021-06-25 14:49:33

【问题描述】：

通过选择它必须返回 html 标签的选项

<select onchange="getval(this);">
    <option value="none" selected>none</option>
    <option value="1">Blood Group</option>
    <option value="2">Donor name</option>
</select>



<script>
function getval(sel)

 if (sel == 1) 
        return '<label for="Bloodgroup">Blood Group</label>
         <select name="bg"  class="form-control" id="exampleFormControlSelect1">
           <option value="O+" selected>O+</option>
           <option value="O-">O-</option>
           <option value="A+">A+</option>
           <option value="A-">A-</option>
         </select>';
    else if (sel == 2) 
        return ' <label for="name">Name</label>
         <input type="text" name = "name" class="form-control" required>';
   

</script>

我想要通过选择选项来输出 例如：如果选项被选为血型

如果是捐赠者姓名，则为其他

【参考方案1】：

您的代码中有几个问题。首先，您传递给getval() 函数的参数是select 元素引用，而不是选择的值，因此if 条件需要从参数中读取value 属性。

此外，您在函数中的return 语句不会单独执行任何操作，因为您从函数返回的值不会执行任何操作。要将字符串中的 HTML 添加到 DOM，您需要调用目标元素的函数或属性以附加内容。在以下示例中，分别使用 querySelector 和 innerHTML 完成：

let content = document.querySelector('#content');

function getval(el) 
  if (el.value == 1) 
    content.innerHTML = `<label for="Bloodgroup">Blood Group</label>
         <select name="bg"  class="form-control" id="exampleFormControlSelect1">
           <option value="O+" selected>O+</option>
           <option value="O-">O-</option>
           <option value="A+">A+</option>
           <option value="A-">A-</option>
         </select>`;
   else if (el.value == 2) 
    content.innerHTML = `<label for="name">Name</label>
          <input type="text" name = "name" class="form-control" required>`;
  

<select onchange="getval(this);">
  <option value="none" selected>none</option>
  <option value="1">Blood Group</option>
  <option value="2">Donor name</option>
</select>

<div id="content"></div>

但同样值得注意的是，在 onclick 属性中使用内联事件处理程序不再是好的做法。此外，应避免在 JS 中存储 HTML。更现代的解决方案是使用不显眼的事件处理程序，并在页面加载时将所有 HTML 包含在 DOM 中，并简单地切换其可见性。

当您使用 jQuery 标记问题时，这里有一个如何做到这一点的示例：

let content = $('#content');

$('select').on('change', e => 
  $('.toggle').hide().filter(`.$e.target.value`).show();
);

.toggle  display: none; 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="none" selected>none</option>
  <option value="bloodgroup">Blood Group</option>
  <option value="donor">Donor name</option>
</select>

<div id="content">
  <div class="toggle bloodgroup">
    <label for="Bloodgroup">Blood Group</label>
    <select name="bg" class="form-control" id="exampleFormControlSelect1">
      <option value="O+" selected>O+</option>
      <option value="O-">O-</option>
      <option value="A+">A+</option>
      <option value="A-">A-</option>
    </select>
  </div>
  <div class="toggle donor">
    <label for="name">Name</label>
    <input type="text" name = "name" class="form-control" required>
  </div>
</div>