在选择JavaScript中选择菜单时创建一个新的DIV

i正在工作该项目，其中有两个视图和三个视图(或者如果可能的话，多个视图(。在我的代码中，选定选项normal在垂直上创建两个DIV，并且Three view垂直创建三个视图(即，在正常选项中再增加一个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，该菜单放置在持续的菜单上。在代码中如何动态创建<div class="box1 box2 box3">。

您的意思是？

还需要唯一的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>

首先，您必须为select输入addEventListener，当您选择Three View：

时

//create div element
const div = documnet.createElement('div');
// add class name
div.className = 'box1 box2 box3';
// get container
const container = document.getElementsByClassName('container')[0];
// add div to container
container.appendChild(div);

相关内容

最新更新

热门标签：