Создать новый div по выбору меню в JavaScript - PullRequest
Новая
       8

Создать новый div по выбору меню в JavaScript

1 голос
/ 13 мая 2019

Я работал над проектом, в котором есть два вида и три вида (или, если возможно, несколько видов).Здесь, в моем коде, выбранная опция normal создает два элемента div, размещенных вертикально, а Three view создает три представления вертикально (т.е. добавляя еще один элемент div в параметре Normal).Здесь по умолчанию один 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, как я могу создать 3 div при выборе Three view меню выбора, расположенного вертикально.В коде как динамически создавать <div class="box1 box2 box3">.

Ответы [ 2 ]

1 голос
/ 13 мая 2019

Вы имеете в виду это?

Также идентификаторы должны быть уникальными 

$(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>
0 голосов
/ 13 мая 2019

сначала вы должны addEventListener для ввода select, а когда вы выбрали 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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...