下拉选择将使用隐藏的按钮填充div，然后在单击时使用隐藏的内容填充另一个div

Question

I am trying to make a somewhat complicated form... and perhaps am making it more complicated than it needs to be! 我正在尝试制作某种复杂的表格...也许正在使其变得比所需的更加复杂！

The title says it all: 标题说明了一切：

Select dropdown option 选择下拉选项
Based on dropdown selection, the designated div #info is populated with a hidden set of buttons (and changes button set based on which option is selected). 根据下拉选择，指定的div #info会填充一组隐藏的按钮（并根据选择的选项更改按钮集）。
Those buttons can then be clicked to display hidden content in the additional designated div #info2 (which also changes content based on the button clicked). 然后可以单击这些按钮以在其他指定的div＃info2中显示隐藏的内容（该内容也根据单击的按钮来更改内容）。

In my fiddle, I tried to show what I am attempting to do, only I used buttons in place of the dropdown. 在我的小提琴中，我试图展示自己的意图，只是我使用按钮代替了下拉菜单。

I hope this makes sense! 我希望这是有道理的！

Edit: I want to be able to click/navigate freely between all buttons and dropdowns, in that when a particular choice is clicked, any content related to the previous choice will be removed from the div which will then be populated by the current div choice content. 编辑：我希望能够在所有按钮和下拉菜单之间自由地单击/导航，因为当单击特定选项时，与上一个选择相关的任何内容将从div中删除，然后由当前div选择填充内容。

$(document).ready(function (){
    $('.buttons button').click(function (){
        $('#info').empty();
        $('#info').html($("#" + $(this).data('link')).html());
    });

 });

<body>
        <div class="want-this-to-be-dropdown">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option1">Button 1</button></li>
                <li class="buttons"><button id="button2" data-link="option2">Button 2</button></li>
                <li class="buttons"><button id="button3" data-link="option3">Button 3</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info">

            </div>
        </div>
<div id="hiddenDivs" style="display:none;">
    <div class="info" id="option1">
      <div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option4">Option 4</button></li>
                <li class="buttons"><button id="button2" data-link="option5">Option 5</button></li>
                <li class="buttons"><button id="button3" data-link="option6">Option 6</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
    </div>
    <div class="info" id="option2">
      <div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option7">Option 7</button></li>
                <li class="buttons"><button id="button2" data-link="option8">Option 8</button></li>
                <li class="buttons"><button id="button3" data-link="option9">Option 9</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
    </div>
    <div class="info" id="option3"><div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option10">Option 10</button></li>
                <li class="buttons"><button id="button2" data-link="option11">Option 11</button></li>
                <li class="buttons"><button id="button3" data-link="option12">Option 12</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
        </div>


        <div class="info" id="option3"><div class="button-panel">
            <ul id="button-column" style="list-style: none;">
                <li class="buttons"><button id="button1" data-link="option10">Fee</button></li>
                <li class="buttons"><button id="button2" data-link="option11">Fi</button></li>
                <li class="buttons"><button id="button3" data-link="option12">Foo</button></li>
            </ul>
        </div>
        <div id="info-div">
            <div id="info2">

            </div>
        </div>
        </div>
</div>
</body>

Here's my fiddle 这是我的小提琴

Answer 1

Okay, so here it goes... 好吧，就这样...

Let's say you have a select field: 假设您有一个选择字段：

 function func() { var val = document.getElementById("select").value; if(val == "bla") { document.getElementById("bla").style.visibility = "visible"; } if(val == "blo") { document.getElementById("blo").style.visibility = "visible"; } }

 <select id="select" onchange="func()"> <option value="" disabled selected style="display:none;">Label 1</option> <option value="bla">bla</option> <option value="blo">blo</option> </select> <div id="bla" style="visibility:hidden; width:30px; height:20px; background-color:#f00"></div> <div id="blo" style="visibility:hidden; width:30px; height:20px; background-color:#ff0"></div>

Do you get the idea? 你有主意吗？

I'm sorry, I just saw that you used jQuery........... You would have smth like a class with visibility:hidden and toggle it with jQuery... The equivalent event would be change(). 抱歉，我刚刚看到您使用了jQuery ...........您将像一个具有可见性的类：隐藏并使用jQuery进行切换...等效事件将为change（）。 Well, this still should ring a bell. 好吧，这仍然应该响起。 If you need further help (like with jQuery) don't hesitate to ask. 如果您需要进一步的帮助（例如jQuery），请随时询问。

:-) :-)

Answer 2

So here is the other approach... 所以这是另一种方法...

 $(document).ready(function (){ $('.buttons button').click(function (){ $('#info').empty(); $('#info').html($("#" + $(this).data('link')).html()); }); }); function func() { $(".info").each(function() { $(this).css("display", "none"); }); var val = $("#select").val(); if(val == "bla") { $("#option1").css("display", "block"); } if(val == "blo") { $("#option2").css("display", "block"); } }

 #button-column { display: inline; float: left; } button { font-size: 10px; width: 50px; height: 30px; margin: 15px; } #info { width: 200px; height: 200px; padding-top: 37.5px; border: 1px solid black; display: inline; float: left; text-align: center; } .info { display:none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="want-this-to-be-dropdown"> <ul id="button-column" style="list-style: none;"> <select id="select" onchange="func()"> <option value="" disabled selected style="display:none;">Label 1</option> <option value="bla">bla</option> <option value="blo">blo</option> </select> </ul> </div> <div id="info-div"> <div id="info"> <div class="info" id="option1"> <div class="button-panel"> <ul id="button-column" style="list-style: none;"> <li class="buttons"><button id="button1" data-link="option4">Option 1</button></li> <li class="buttons"><button id="button2" data-link="option5">Option 2</button></li> <li class="buttons"><button id="button3" data-link="option6">Option 3</button></li> </ul> </div> <div id="info-div"> <div id="info1"> </div> </div> </div> <div class="info" id="option2"> <div class="button-panel"> <ul id="button-column" style="list-style: none;"> <li class="buttons"><button id="button1" data-link="option4">Option 4</button></li> <li class="buttons"><button id="button2" data-link="option5">Option 5</button></li> <li class="buttons"><button id="button3" data-link="option6">Option 6</button></li> </ul> </div> <div id="info-div"> <div id="info2"> </div> </div> </div> </div> </div>

The code itself shouldn't be too hard to understand. 代码本身不应该太难理解。 If you have trouble though, I can break it down for you :-) 如果您遇到麻烦，我可以为您分解:-)

下拉选择将使用隐藏的按钮填充div，然后在单击时使用隐藏的内容填充另一个div

问题描述

2 个解决方案

解决方案1
1 2016-11-21 03:09:40

解决方案2
1 2016-11-21 03:43:01

下拉选择将使用隐藏的按钮填充div，然后在单击时使用隐藏的内容填充另一个div

问题描述

2 个解决方案

解决方案1 1 2016-11-21 03:09:40

解决方案2 1 2016-11-21 03:43:01

解决方案1
1 2016-11-21 03:09:40

解决方案2
1 2016-11-21 03:43:01