javascript - 使用javascript从html中删除div

Question

这是我的代码。它在一个 php 文件中。它并不能完全满足我的要求。它隐藏了一个选项并显示了另一个，但我需要做的不仅仅是在视觉上隐藏选项，而是根本不在 html 中显示。现在，如果您单击查看源代码，它会显示所有的 div。当我单击一个选项时，我需要它，其他选项从 html 中消失并查看页面源代码，只有被选中的选项在其中。有什么想法吗？

    <select name="type" onchange="showstuff(this.value);"> 
              <option value="code">Code</option> 
              <option value="look">Look</option> 
              <option value="have" selected>Have</option> 
    </select> 

    <div id="have" style="display:block;">1</div>
 <div id="look" style="display:none;">2</div>
    <div id="code" style="display:none;">3</div>

    <script>
    function showstuff(element){ 
        document.getElementById("have").style.display = element=="have"?"block":"none"; 
        document.getElementById("look").style.display = element=="look"?"block":"none";  
            document.getElementById("code").style.display = element=="code"?"block":"none";
    }
    </script>

Answer 1

您可以创建一个 div 以在其上放置事件选项。

像这样

<select name="type" onchange="showstuff(this.value);"> 
    <option value="code">Code</option> 
    <option value="look">Look</option> 
    <option value="have" selected>Have</option> 
</select> 

<div id="optionContainer">
</div>

<script>

  //Object with the options. you can access for example have with options['have'] or options.have
    var options = {'have':'<div id="have"><b>1</b></div>',
                   'look':'<div id="have"><b>2</b></div>',
                   'code':'<div id="have"><b>3</b></div>'};

    function showstuff(element){ 
        //Replace the inner HTML of the div optionContainer with the string in the option
        document.getElementById("optionContainer").innerHTML = options[element];
    }

</script>

我创建了这个 jsfiddle看看它的实际效果