现在,当选择一个选项时,它将被添加到DOM中,然后在选择另一个选项时,它将仅继续添加选择的选项。
我希望这样做,以便每当选择一个选项时,它将唯一显示。选择新元素时,请勿添加元素,而只是替换它们。
//Function to add Elements
function myFunction() {
var x = document.getElementById("mySelect").value;
if(x == "format_text"){
document.getElementById("container").innerHTML +=
'<div id="block"><h2>Formatted Text</h2><textarea style="width:100%; height: 300px;"></textarea><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div></div>'
} else if (x == "rightImg_leftTxt"){
document.getElementById("container").innerHTML +=
'<div id="block"><h2>Right Image Left Text</h2><div class="row" id="container"><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div>'
}
else if (x == "leftImg_rightTxt"){
document.getElementById("container").innerHTML +=
'<div id="block"><h2>Left Image Right Text</h2><div class="row" id="container"><div class="col-md-6"><textarea style="width:100%; height: 300px;"></textarea></div><div class="col-md-6"><input type="file" accept="image/*" onchange="preview_image(event)"><img id="output_image"/></div></div><button onclick="Delete(this)" type="submit" class="btn btn-info waves-effect m-t-20">Remove Block</button></div>'
}
}
//Function For image Preview
function preview_image(event)
{
var reader = new FileReader();
reader.onload = function()
{
var output = document.getElementById('output_image');
output.src = reader.result;
}
reader.readAsDataURL(event.target.files[0]);
}
//Delete button Function
function Delete(button)
{
var elem = document.getElementById("block");
elem.parentNode.removeChild(elem);
event.preventDefault();
}
<div class="form-group col-md-9">
<div class="btn-group bootstrap-select form-control show-tick">
<select id="mySelect" class="form-control show-tick" name="assignee_token" tabindex="-98" onchange="myFunction()" required>
<option value="0">Choose Block Type</option>
<option value="format_text">Formatted Text</option>
<option value="rightImg_leftTxt"> Right Image, Left Text</option>
< <option value="leftImg_rightTxt"> Left Image, Right Text</option>
</select>
</div>
</div>
</div>
</div>
<div class="card">
<div class="body">
<textarea name="body" class="summernote" id="contents" title="Contents">
</textarea>
<button type="submit" class="btn btn-info waves-effect m-t-20">Create</button>
</div>
</div>
<div class="card">
<div class="body">
<div id="container" class="container">
<!-- <div id="container">
</div> -->
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
答案 0 :(得分:1)
这是因为您在+=
中使用document.getElementById("container").innerHTML +=
这样一来,便会不断添加内容。