通过选择必须返回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
您的代码中有几个问题。首先,您传递给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>