html - 3 个并排的框，通过下拉列表切换显示的框

Question

http://jsfiddle.net/rnmk0zhz/5/

上面是我的 JSFiddle

我有3个下拉框，它们下面是隐藏的三个div。当选择“否”时，我希望显示其正下方的框。

我不希望它总是显示在左侧。如果中间没有选择，我希望中间下拉列表下的中间框隐藏，除非也选择其中之一。如果用户在两个框中选择“否”，那么我希望显示两个框。

我尝试过 float 它们，但是当一个隐藏一个显示时，填充会关闭。绝对位置不起作用，因为有很多行并且它们会重叠。

我希望我清楚我在这里要做什么。

<table style="padding-left: 56px; padding-top: 3px;">
    <tr>
        <td style="width: 421px;">
            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl1">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
        <td style="width: 421px;">
            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl2">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
        <td style="width: 421px;">

            <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
                <select id="ddl3">
                    <option>yes</option>
                    <option>no</option>
                </select>
            </div>
        </td>
    </tr>
</table>
<div style="padding-left: 56px;" class="">
    <div class="box1" style="display:inline-block; height: 150px; width: 415px;">
        <span>box1</span>
        <br/>
        <br/>
        <textarea style="height: 149px; width: 328px;"></textarea>

    </div>
    <div class="box2" style="display: inline-block; height: 150px; width: 409px;">
        <span>box2</span>
        <br/>
        <br/>
        <textarea style="height: 149px; width: 328px;"></textarea>

    </div>
    <div class="box3" style="display:inline-block; height: 150px;  width: 409px;">
        <span>box3</span>
        <br/><br/>
        <textarea style="height: 149px;  width: 328px;"></textarea>

    </div>
</div>

Answer 1

我认为你可以使用 jquery 切换将其简化为:

$("[class^='box'").hide();

$("#ddl1").on("change", function() {
  $('.box1').toggle($(":selected", this).text() == "no");
});
$("#ddl2").on("change", function() {
  $('.box2').toggle($(":selected", this).text() == "no");
});
$("#ddl3").on("change", function() {
  $('.box3').toggle($(":selected", this).text() == "no");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
  <tr>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl1">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl2">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl3">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
  </tr>
</table>
<div style="padding-left: 56px;" class="">
  <div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>

    <br/>
    <br/>
    <textarea style="height: 149px; width: 328px;"></textarea>
  </div>
  <div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>

    <br/>
    <br/>
    <textarea style="height: 149px; width: 328px;"></textarea>
  </div>
  <div class="box3" style="display:inline-block; height: 150px;  width: 409px;"> <span>box3</span>

    <br/>
    <br/>
    <textarea style="height: 149px;  width: 328px;"></textarea>
  </div>
</div>

在您对框的位置发表评论后，我建议使用 visibility: hide 而不是 display: none:

$("[class^='box'").css("visibility", "hidden");

$("#ddl1").on("change", function() {
  $(":selected", this).text() == "no" ? $('.box1').css('visibility', 'visible') : $('.box1').css('visibility', 'hidden');

});
$("#ddl2").on("change", function() {
  $(":selected", this).text() == "no" ? $('.box2').css('visibility', 'visible') : $('.box2').css('visibility', 'hidden');
});
$("#ddl3").on("change", function() {
  $(":selected", this).text() == "no" ? $('.box3').css('visibility', 'visible') : $('.box3').css('visibility', 'hidden');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="padding-left: 56px; padding-top: 3px;">
  <tr>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl1">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl2">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
    <td style="width: 421px;">
      <div style="float: left; margin-left: 0px; margin-top: 0px;" id="gray-select" class="gray">
        <select id="ddl3">
          <option>yes</option>
          <option>no</option>
        </select>
      </div>
    </td>
  </tr>
</table>
<div style="padding-left: 56px;" class="">
  <div class="box1" style="display:inline-block; height: 150px; width: 415px;"> <span>box1</span>

    <br/>
    <br/>
    <textarea style="height: 149px; width: 328px;"></textarea>
  </div>
  <div class="box2" style="display: inline-block; height: 150px; width: 409px;"> <span>box2</span>

    <br/>
    <br/>
    <textarea style="height: 149px; width: 328px;"></textarea>
  </div>
  <div class="box3" style="display:inline-block; height: 150px;  width: 409px;"> <span>box3</span>

    <br/>
    <br/>
    <textarea style="height: 149px;  width: 328px;"></textarea>
  </div>
</div>