Question

我试图制作一个有点复杂的形式......也许正在使它变得比它需要的更复杂！

标题说明了一切：

选择下拉选项
根据下拉列表选择，指定的div #info将填充一组隐藏的按钮（根据选择的选项设置更改按钮）。
然后可以点击这些按钮以显示附加指定div＃info2中的隐藏内容（这也会根据点击的按钮更改内容）。

在我的小提琴中，我试图展示我正在尝试做的事情，只是我用按钮代替了下拉列表。

我希望这是有道理的！

编辑：我希望能够在所有按钮和下拉菜单之间自由点击/导航，因为当点击特定选项时，任何与之前选择相关的内容都将从div中删除，然后由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

好的，所以在这里......

我们假设您有一个选择字段：

＆＃13;

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";
  }
}

＆＃13;

<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>

＆＃13;

你明白了吗？

对不起，我刚刚看到你使用了jQuery ...........你会像一个具有可见性的类一样：隐藏并用jQuery切换它...等效事件将是改变（）。好吧，这仍然应该响铃。如果你需要进一步的帮助（比如jQuery），请不要犹豫。

： - ）

Answer 2

所以这是另一种方法......

＆＃13;

$(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");	
    }
}

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

代码本身不应该太难理解。如果你遇到麻烦，我可以为你分解： - ）

下拉选项使用隐藏按钮填充div，然后在点击

2 个答案: