Question

我正在使用搜索框，根据用户选择通过下拉框显示不同的选项。基本上我需要一个非常干净，轻量级的方法来切换不同的div而无需重新加载页面。我是JS的新手，但我知道应该有一些非常简单的方法来设置使用JS的显示属性 - 我只是不完全确定如何去做。任何帮助将非常感谢，谢谢。

Answer 1

因为你在这里使用jQuery是一个使用jQuery的基本例子。

我在几分钟内将它扔在一起，所以它不是要完全充实，只是为了让你朝着正确的方向前进。它向您展示了如何基于vanilla HTML表单select元素更改div的样式。如果您使用jQuery UI，您可以获得更好看的选择元素，但它不是必需的。

<html lang="en">
<head>
    <title>Dynamic Form Example</title>
    <!-- this is the class you will use to style the hidden divs
        or even the visible ones. I'm using display: none, but
        you can style them however you want: visibility: hidden,
        zero width, etc etc -->
    <style>
        .hidden { display: none }
    </style>
    </link>
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
        var myApp = {
            init: function init(){
                $("#food_select").change(function(evnt){
                    myApp.setComment(this.value);
                });

                //Set default value
                document.my_form.food_select.selectedIndex = 0;

                //Show appropriate comment for default value
                myApp.setComment(document.my_form.food_select[0].value);
            },

            setComment: function setComment(food){
                // This is jus an example, you will prob
                // need more complicated logic, maybe a switch etc
                if((food === "pizza") || (food === "burrito")){

                    // here we toggle the class that styles the elements
                    //     the second argument is whether the class should
                    //      be added or removed
                    $("#yum").toggleClass("hidden", false);
                    $("#yuck").toggleClass("hidden", true); 
                };
                if((food === "haggis") || (food === "sardines")){

                    $("#yum").toggleClass("hidden", true);
                    $("#yuck").toggleClass("hidden", false); 
                };
            }
        };
        $("document").ready( function () { myApp.init() } );
    </script>
</head>
<body>
<div id="yuck">YUCK!</div>
<div id="yum">mmmm yummy.</div>
<div id="form_div">
<form name="my_form">
<select name="food" id="food_select">
<option value="pizza">Pizza</option>
<option value="burrito">Burrito</option>
<option value="sardines">Sardines</option>
<option value="haggis">Haggis</option>
</select>
<button id="submit_food_button" value="submit">Submit</button> 
</form>
</div>
</body>
</html>

Answer 2

不使用jQuery，这里有一些可以做到的事情。真正的基本DOM东西，但无论如何...
它被评论为死亡，但一般来说，你给它一个容器ID（你要显示/隐藏你的元素），然后一些 hide-all-then-show-one-they 在select元素的onchange中完成。检索要显示的元素的方法是basename + suffix（后缀是相应元素的select选项的值）。

这里：

<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 and 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);
    function doSelect(select) {
        // get value of select
        var value = select.value;
        // find element based on the value of the select
        var selected = findElement(value);
        if (!selected) {return;} // didn't find the element, bail
        // do hiding/showing of elements
        hideAll(elementsContainer);
        showElement(selected);
    }
    // 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>

JS显示基于下拉用户输入的内容

2 个答案: