提问者:小点点

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


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


共1个答案

匿名用户

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

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

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>