javascript - 如何根据下拉菜单中选择的选项在网页中创建动态内容

Question

我有一个网页，其中有一个未选择默认选项的下拉菜单。当用户选择一个选项时，我想显示与该选项相关的文本框。我怎样才能做到这一点。例如我有这些图片

Answer 1

使用可见性设置为隐藏的 div，并使其在选择事件中可见。您可以将多个 div 用于无神论目的，与选择事件相关联。

可以在帖子 2 中找到一个示例 -

http://www.codingforums.com/showthread.php?t=167172

Answer 2

这很简单。所有文本框都是隐藏的，并且在您的下拉菜单中有一个事件，您只需显示正确的 div。

HTML：

<select id='dropdown' onchange='showDiv()'>
    <option>Select</option>
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
</select>

<br /><br />

<div id="div1" style='display: none;'>Div 1</div>
<div id="div2" style='display: none;'>Div 2</div>

JS

<script type="text/javascript">
    function showDiv() {
        var div = document.getElementById("dropdown").value;
        if(document.getElementById(div) != null) {
        hideAllDiv();
            document.getElementById(div).style.display = "block";
    }
    }

    function hideAllDiv() {
        document.getElementById("div1").style.display = "none";
        document.getElementById("div2").style.display = "none";
    }
</script>

上面的代码很难看，但你可以用 jquery 和一些 css 做得更好。

编辑 ：

使用 Jquery 的示例

<select id='dropdown'>
    <option>Select</option>
    <option value="div1">Div 1</option>
    <option value="div2">Div 2</option>
</select>

<br /><br />

<div class='div' id="div1">Div 1</div>
<div class='div' id="div2">Div 2</div>

<style type="text/css">
    .div { display: none; }
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#dropdown").change(function() {
            $(".div").hide();
            $("#" + $(this).val()).show();
        });
    });
</script>

Answer 3

真的取决于您在列表框中有多少选项以及文本框是否在选项之间共享。

您可以创建隐藏的 DIV，然后在选择选项时显示这些 DIV。您需要创建一个 JavaScript 函数，该函数使用附加到下拉列表的 onChange 事件触发。

如果您共享文本框，然后给它们特定的类，您可以在 Javascript 函数中显示/隐藏这些类，如果您使用 jQuery 之类的东西，这相对简单。

Answer 4

为选择添加一个事件处理程序，如下所示：

$('#yourSelectId').change(function() {
    var selectedVal = $('#yourSelectId option:selected').attr('value');  
});

然后根据所选值（ $.('.class').hide() ）使一些隐藏的 div 可见。