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以查看其实际操作

Answer 2

使用jquery方法 - show（），hide（）和remove（）。可以使用 $（＆＃34;＃id＆＃34;）。remove（）从呈现的页面中删除html。

https://api.jquery.com/remove/

用javascript从html中删除div

2 个答案: