Question

我在javascript中寻找一个简单的脚本，我可以扩展，在基本级别我希望根据用户选择的<select>中的哪个选项显示1个字段。

<select id="options">
  <option value="spoon">Spoon</option>
  <option value="form">Fork</option>
</select>

if select=spoon {
  <input>enter your favorite soup</input>
} else {
  <input>Your gonna need a knife</input>
}

简单的JS是关键！

Answer 1

我想我在SO上的其他地方发布了这个，但现在找不到那个帖子了。这可能是你需要建立的东西 看看ma，没有jQuery！（耶！）

<body>

<select id="mySelect" onchange="npup.doSelect(this);">
    <option value="">Npup says 'select'</option>
    <!-- the option values are suffixes for the elements to show -->
    <option value="0">zero</option>
    <option value="1">one</option>
    <option value="2">two</option>
</select>
<!-- container for any elements that are to be in the game -->
<div id="mySpecialElements">
    <!--  these have ids that end with an index  for easy retrieval in "findeElement" function  below-->
    <div id="npup0" class="hidden">div 0</div>
    <div id="npup1" class="hidden">div 1</div>
    <div id="npup2" class="hidden">div 2</div>
</div>

<script type="text/javascript">

window.npup = (function (containerId, baseId) {
    // save the container of your special element
    var elementsContainer = document.getElementById(containerId);
    var baseId = baseId;
    function doSelect(select) {
        // get value of select
            var idx = select.selectedIndex;
            if (idx<0) {return;}
        var value = select.options[idx].value;
        // find element based on the value of the select
        var targetDiv = findElement(value);
        if (!targetDiv) { return;} // didn't find the element, bail
        // do magic..
        hideAll(elementsContainer);
        showElement(targetDiv);
    }
    // retrieve some element based on the value submitted
    function findElement(value) {
        return document.getElementById(baseId+value);
    }
    // hide all element nodes within some parent element
    function hideAll(parent) {
        var children = parent.childNodes, child;
        // loop all the parent's children
        for (var idx=0, len = children.length; idx<len; ++idx) {
            child = children.item(idx);
            // if element node (not comment- or textnode)
            if (child.nodeType===1) {
                // hide it
                child.style.display = 'none';
            }
        }
    }
    // display a certain element
    function showElement(element) {
        element.style.display = '';
    }
    // hide all on page load (might want some extra logic here)
    hideAll(elementsContainer);

    // export api to use from select element's onchange or so
    return {
        doSelect: doSelect
    };
})('mySpecialElements', 'npup'); // give the routine a container id of your special elements, and the base id of those elements


</script>

</body>

Answer 2

像this之类的东西？它被称为链式选择

Answer 3

您可以使用onchange元素的<select>属性在每次更改下拉列表时执行一些Javascript代码。

<select onchange="myFunction(this)">

（你看我把dropdown元素本身作为方法参数传递，这只是为了方便起见）

您可以使用element.options获取所有选项，使用element.selectedIndex获取当前所选选项的索引。

function myFunction(dropdown) {
    var selectedOption = dropdown.options[dropdown.selectedIndex].value;
}

您可以使用document.getElementById()按id检索任何元素。想象一下，您有以下输入元素：

<input type="text" id="foo">
<input type="text" id="bar">

然后您可以按如下方式获取它们：

var foo = document.getElementById('foo');
var bar = document.getElementById('bar');

您可以使用element.style.display更改CSS display属性。值block表示显示，值none表示隐藏。现在做数学运算：

function myFunction(dropdown) {
    var selectedOption = dropdown.options[dropdown.selectedIndex].value;
    var foo = document.getElementById('foo');
    var bar = document.getElementById('bar');

    if (selectedOption == 'spoon') {
        foo.style.display = 'none'; // Hide foo.
        bar.style.display = 'block'; // Show bar.
    } else {
        foo.style.display = 'block'; // Show foo.
        bar.style.display = 'none'; // Hide bar.
    }
}

要了解有关Javascript和HTML DOM的更多信息，建议您this tutorial。

Javascript - 隐藏/显示字段的简单表单脚本

3 个答案: