时间戳

首页 > 解决方案 > 在javascript中选择菜单时创建一个新的div

javascript - 在javascript中选择菜单时创建一个新的div

问题描述

我正在从事有两个视图和三个视图（或者如果可能的话是多个视图）的项目。在我的代码中，选择的选项normal创建了两个垂直放置的 div 并垂直Three view创建了三个视图（即在 Normal 选项中再添加一个 div）。这里默认的是Normal

.header{
        width:100%;
        height:40px;
	background:#f4f3f1;
        border: 1px solid #dbdfe5;
        text-align: center;
        font-size: 20px;
        padding-top:0px;
	color: green;
	font-weight:bold;
}
.container{
        width: 100%;
        min-height: 150px;
        padding-top:2px;
        display: flex;
}
.container .box1{
        background: #ffffff;
        border-radius: 3px;
        border: 2px solid #dbdfe5;
        flex: 1;
		overflow: auto;
}
.container .box1 #inside{
        width:100%;
        height:35px;
        border: 1px solid #dbdfe5;
        padding-bottom:10px;
        border-radius: 1px;
        background:#f4f3f1;
}
.container .box1.box2{
        background: #ffffff;
        border-radius: 3px;
		overflow: auto;
}
.container .box1.box2 #second{
        width:100%;
        height:35px;
        border: 1px solid #dbdfe5;
        border-radius: 5px;
        padding-bottom:10px;
        background:#f4f3f1;
}
.tabb{
        float:left;
        margin-left:10px;
		margin:5px;
		display: inline-block;
        padding: 6px 12px;
        border-radius: 5px;
}
<body>
   <div class="header">
	<select class="tabb" name="opt" id="opt" >
	  <option value="two">Normal </option>
	  <option value="three">Three view</option>
	</select>
	Demo </div>
   <div class="container">
        <div class="box1">		
            <div id="inside" >	
		<center>Inside Box1</center>
            </div>	
	    <center>Main Box1</center>
	</div>

        <div class="box1 box2">
            <div id="second" >
                <center>Inside Box2</center>
            </div>
            <center>Main Box2</center>
        </div>
    </div>
</body>

目前默认创建了两个 div，我如何在选择Three view选择菜单时创建 3 个 div，放置 vetically。在代码中如何动态创建<div class="box1 box2 box3">.

标签： javascriptjquerycsshtml

解决方案

你是这个意思？

ID也需要是唯一的

$(function() {
  $("#opt").on("change", function() {
    $(".box3").toggle(this.value == "three"); // toggle will show if true, hide if false
  }).change()
})
.header {
  width: 100%;
  height: 40px;
  background: #f4f3f1;
  border: 1px solid #dbdfe5;
  text-align: center;
  font-size: 20px;
  padding-top: 0px;
  color: green;
  font-weight: bold;
}

.container {
  width: 100%;
  min-height: 150px;
  padding-top: 2px;
  display: flex;
}

.container .box1 {
  background: #ffffff;
  border-radius: 3px;
  border: 2px solid #dbdfe5;
  flex: 1;
  overflow: auto;
}

.container .box1 #first {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  padding-bottom: 10px;
  border-radius: 1px;
  background: #f4f3f1;
}

.container .box1.box2 {
  background: #ffffff;
  border-radius: 3px;
  overflow: auto;
}

.container .box1.box2 #second {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box3 #third {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.tabb {
  float: left;
  margin-left: 10px;
  margin: 5px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="header">
    <select class="tabb" name="opt" id="opt">
      <option value="two">Normal </option>
      <option value="three">Three view</option>
    </select>
    Demo </div>
  <div class="container">
    <div class="box1">
      <div id="first">
        <center>Inside Box1</center>
      </div>
      <center>Main Box1</center>
    </div>

    <div class="box1 box2">
      <div id="second">
        <center>Inside Box2</center>
      </div>
      <center>Main Box2</center>
    </div>

    <div class="box1 box2 box3">
      <div id="third">
        <center>Inside Box3</center>
      </div>
      <center>Main Box3</center>
    </div>


  </div>
</body>

要添加视图，请尝试以下操作：

var views = {
  "three": ".box3",
  "four": ".box3,.box4"
}
$(function() {
  $("#opt").on("change", function() {
    var view = views[this.value]; // if three or four
    $(".box3,.box4").hide(); // hide anyway
    if (view) $(view).show(); // show box2 or box3 and box4
  }).change()
})
.header {
  width: 100%;
  height: 40px;
  background: #f4f3f1;
  border: 1px solid #dbdfe5;
  text-align: center;
  font-size: 20px;
  padding-top: 0px;
  color: green;
  font-weight: bold;
}

.container {
  width: 100%;
  min-height: 150px;
  padding-top: 2px;
  display: flex;
}

.container .box1 {
  background: #ffffff;
  border-radius: 3px;
  border: 2px solid #dbdfe5;
  flex: 1;
  overflow: auto;
}

.container .box1 #first {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  padding-bottom: 10px;
  border-radius: 1px;
  background: #f4f3f1;
}

.container .box1.box2 {
  background: #ffffff;
  border-radius: 3px;
  overflow: auto;
}

.container .box1.box2 #second {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box3 #third {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.container .box1.box2.box4 #fourth {
  width: 100%;
  height: 35px;
  border: 1px solid #dbdfe5;
  border-radius: 5px;
  padding-bottom: 10px;
  background: #f4f3f1;
}

.tabb {
  float: left;
  margin-left: 10px;
  margin: 5px;
  display: inline-block;
  padding: 6px 12px;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="header">
    <select class="tabb" name="opt" id="opt">
      <option value="two">Normal </option>
      <option value="three">Three view</option>
      <option value="four">Four view</option>
    </select>
    Demo </div>
  <div class="container">
    <div class="box1">
      <div id="first">
        <center>Inside Box1</center>
      </div>
      <center>Main Box1</center>
    </div>

    <div class="box1 box2">
      <div id="second">
        <center>Inside Box2</center>
      </div>
      <center>Main Box2</center>
    </div>

    <div class="box1 box2 box3">
      <div id="third">
        <center>Inside Box3</center>
      </div>
      <center>Main Box3</center>
    </div>

    <div class="box1 box2 box4">
      <div id="fourth">
        <center>Inside Box4</center>
      </div>
      <center>Main Box4</center>
    </div>


  </div>
</body>

推荐阅读