Добавление выделенного объекта и текста в div с использованием JQuery - PullRequest
Новая
       89

Добавление выделенного объекта и текста в div с использованием JQuery

1 голос
/ 24 октября 2019 

	
	$("#subBtn").click(function(){
  	var ifType = $("#pcker").clone();
  	$("#scontainer").append("<div class='row'><div class='col'>"+ifType+"</div></div>");

});
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="row">
		<div class="col">

<select class="selectpicker" data-live-search="true" id="pcker">
<option value='gag'>raps</option>
<option value='gag'>Experiments</option>
<option value='gag'>value</option>
<option value='gag'>select</option>
<option value='gag'>bootstrap</option>
</option>

</select>


<button class="btn" type="button" id="subBtn" value="test">Add Button</button>
</div>
<div class="row" id="scontainer"></div>
</div>
	</body>



</html>

Я клонирую опцию выбора HTML с использованием JQuery 

var ifType = $("#thevalue\\.type").clone();

, где thevalue.type - это идентификаторвыбор.

Есть несколько вариантов, которые я клонировал. Я хочу напечатать их в одну строку, добавив их в один контейнер div. Я попытался использовать следующее для одного выбора: 

$("#scontainer").append("<div class='row'>");
$("#scontainer").append("<div class='col'>");
$("#scontainer").append(ifType);
$("#scontainer").append("</div>");
$("#scontainer").append("</div>");

Однако это генерирует HTML-код вида

<div class='row'></div><div class='col'></div> **ifType value here**.

Как мне сделать это, чтобы клонироватьВыделенный объект находится внутри строки и столбцов div?

Ответы [ 2 ]

1 голос
/ 24 октября 2019

Я просто немного изменил ваш код и думаю, что он работает и добавляет выбор в той же строке

html 

<div class="row">
    <div class="col">

        <select class="selectpicker" data-live-search="true" id="pcker">
      <option value='gag'>raps</option>
      <option value='gag'>Experiments</option>
      <option value='gag'>value</option>
      <option value='gag'>select</option>
      <option value='gag'>bootstrap</option>
      </option>

    </select>
        <button class="btn" type="button" id="subBtn" value="test">Add Button</button>
    </div>
</div>
<div class="row">
    <div id="scontainer" class='col'>

    </div>
</div>

js 

  $("#subBtn").click(function() {
    var ifType = $("#pcker").clone();
    $("#scontainer").append(
       ifType 
    );
  });
1 голос
/ 24 октября 2019

Используйте следующее: 

$("#scontainer").append("<div class='row'><div class='col'>"+ifType+"</div></div>");

вместо 

$("#scontainer").append("<div class='row'>");
$("#scontainer").append("<div class='col'>");
$("#scontainer").append(ifType);
$("#scontainer").append("</div>");
$("#scontainer").append("</div>");

Согласно вашему фрагменту: 

$("#subBtn").click(function(){
  	 $("#pcker").clone().appendTo('#scontainer');
});
 
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
	<div class="row">
		<div class="col">

<select class="selectpicker" data-live-search="true" id="pcker">
<option value='gag'>raps</option>
<option value='gag'>Experiments</option>
<option value='gag'>value</option>
<option value='gag'>select</option>
<option value='gag'>bootstrap</option>

</select>

</div>
</div>

<button class="btn" type="button" id="subBtn" value="test">Add Button</button>

<div class='row'><div class='col' id="scontainer"> 

</div></div>
 
	</body>
</html>

$("#subBtn").click(function(){
     var ifType = $("#pcker").clone(true);
     $("#scontainer").append(ifType);
});
 <html>
 <head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 </head>
 <body>
 <div class="row">
 <div class="col">

 <select class="selectpicker" data-live-search="true" id="pcker">
        <option value='gag'>raps</option>
        <option value='gag'>Experiments</option>
        <option value='gag'>value</option>
        <option value='gag'>select</option>
        <option value='gag'>bootstrap</option>
 </select>

 </div>
 </div>

 <button class="btn" type="button" id="subBtn" value="test">Add Button</button>

 <div class='row'><div class='col' id="scontainer"> 

 </div></div>
         
 </body>
 </html>

также я предлагаю вам append это body и не использовать id атрибуты, потому что id будет дублироваться и не будет-Уникальная.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...