Question

我的JSFiddle在上面

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

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

我试过漂浮它们，但是当一个人隐藏并且一个显示时，填充物是关闭的。绝对的位置不会起作用，因为有这些行并且它们会重叠。

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

<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切换来简化它：

＆＃13;

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

＆＃13;

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

＆＃13;

在您对框的位置发表评论后，我建议您使用visibility: hidden代替display: none：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

更改后更新答案

给一个班级说出.box并将其浮动，使它们在一行中。我也设置了框的宽度以及给!important的textarea。您应该删除textarea和框的内联宽度，然后删除此!important

.box {
  width: 25% !important;
  float: left;
  margin-left: 5%;
}
.box textarea {
    width: 100% !important; 
}

See fiddle

Answer 3

尝试以下示例，希望这会对您有所帮助

.box1, .box2, .box3{
    visibility: hidden;
}
#wrapper{
    width:95%;
    overflow:auto;
}

Fiddle Demo

3个并排框，切换按下拉列表显示的内容

3 个答案: