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

Question

通过选择必须返回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>

如果是捐赠者名称，则为else

Answer 1

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

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

null

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>