Clone Bootstrap-select in the same page

Clone Bootstrap-select in the same page - javascript

I'm trying to clone bootstrap select field, but after cloning it, cloned select do not select anything.
This is my markup:
<div class="form-group car-list">
<label class="col-md-3 control-label">Select car #1</label>
<div class="col-md-9">
<div class="input-group">
<select class="select-car" data-live-search="true">
<option></option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
</div>
</div>
And my js:
$(document).ready(function() {
$('.select-car').selectpicker();
});
$('#add').click(function () {
var n = $('.car-list').length + 1;
var temp = $('.form-group:last').clone(true);
$('.control-label:first', temp).html('Select car #' + n);
$('.form-group:last').after(temp);
});
I try to use selectpicker refresh command: the result was that I had the second selectpicker inside cloned div.

Working Fiddle.
You could use a select model called in every clone, then init the select after the clone like the snippet below shown :
$('#add').click(function() {
var n = $('.car-list').length + 1;
var temp = $('.form-group:last').clone(true).removeClass('select-car');
$('.control-label:first', temp).html('Select car #' + n);
$('.input-group', temp).html($('#select-model').html());
$('.select-car', temp).selectpicker();
$('.form-group:last').after(temp);
});
Hope this helps.
$('#add').click(function() {
var n = $('.car-list').length + 1;
var temp = $('.form-group:last').clone(true).removeClass('select-car');
$('.control-label:first', temp).html('Select car #' + n);
$('.input-group', temp).html($('#select-model').html());
$('.select-car', temp).selectpicker();
$('.form-group:last').after(temp);
});
.category {
margin-left: -12px;
font-size: 1.3em;
/*safari won't respect many/any of these but color?*/
/*font-style: italic;*/
font-weight: bold !important;
color: #000000 !important;
/*straight black makes it pop*/
/*background: #000;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.5/js/bootstrap-select.min.js"></script>
<div class="form-group car-list">
<label class="col-md-3 control-label">Select car #1</label>
<div class="col-md-9">
<div class="input-group">
<select class="select-car selectpicker" data-live-search="true">
<option></option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
</div>
</div>
<div id="select-model" class="hide">
<select class="select-car" data-live-search="true">
<option></option>
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
</div>
<button id="add">Add</button>

Related

Why is chosen preventing a JavaScript conditional from working properly?

There are two snippets below. I'm using Bootstrap 3 and Chosen for my select menus.
The functionality with the following is that when a specific selection is made (i.e.; Social Services), then a second select menu displays. That menu goes away if Defendant, Minor or Witness are selected. The piece that controls this is here:
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
Snippet 1: I am able to use chosen, but when I select Social Services, the second select menu doesn't come up. In order for chosen to work, the chosen class must be set to a width: 100%;, which is this piece:
$(".chosen-select").chosen({
width: "100%"
});
$(".chosen-select").chosen({
width: "100%"
});
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
Snippet 2: If I remove the snippet:
$(".chosen-select").chosen({
width: "100%"
});
...then the select menu turns back into it's native format (without chosen) and allows me to choose Social Services and display the second select menu, but the chosen functionality doesn't work in that first select menu.
document.getElementById("form1").addEventListener("change", function () {
var style = this.value == 4 || this.value == 5 ? "block" : "none";
document.getElementById("form2").style.display = style;
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>
The only difference here is this:
$(".chosen-select").chosen({
width: "100%"
});
Does anyone know why this is happening or if there is a workaround for it?

The issue is because Chosen raises jQuery-based events, so using addEventListener() won't detect them. You need to use jQuery's on() method instead:
$(".chosen-select").chosen({
width: "100%"
});
$("#form1").on("change", function() {
$("#form2").toggle(this.value == 4 || this.value == 5);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-chosen#1.4.2/bootstrap-chosen.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div class="container">
<div class="panel-body">
<div class="col-sm-6 b-r">
<div class="form-group">
<label for="form1">Involved How?</label>
<select id="form1" name="form1" data-placeholder="Involved as..." class="chosen-select form-control">
<option value="1">Defendant</option>
<option value="2">Minor</option>
<option value="3">Witness</option>
<option value="4">Social Services</option>
<option value="5">Prosecution</option>
</select>
</div>
</div>
<div class="col-sm-6 b-r">
<div class="form-group" id="form2" style="display: none;">
<label for="form2">Agency</label>
<select name="form2" class="form-control chosen-select">
<option value="1">Legal Services</option>
<option value="2">Social Services</option>
<option value="3">Prosecutor's Office</option>
</select>
</div>
</div>
</div>
</div>

How to show and hide Div by mutiple Select form after submission

I have two select form with submit button, I need to get the result of selected value for example
first select form having colours as an option and second contains another things.
and i have some items as div....red flower , red fish.
if i select red from first form its shows red value div and in second form if i select flower it should display red flower only but it's shows everything under the value red. And these all thing must work only when i submit the search button.
I have attached jsfiddle below.
Code:
$(document).ready(function(){
$("select").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
.box{
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red{ background: #ff0000; }
.green{ background: #228B22; }
.blue{ background: #0000ff; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="flower">flower</option>
<option value="fish">fish</option>
<option value="toy">toy</option>
</select>
</div>
<div class="col-2">
<button id="search" class="btn btn-primary w-100">Search</button>
</div>
</div>
<div class="red all flower box">Red flower</div>
<div class="red all fish box">red fish</div>
<div class="green all toy box">green toy</div>
<div class="blue all toy box">blue toy</div>
<div class="blue all flower box">blue flower</div>
Jsfiddle :
https://jsfiddle.net/JOHN_748/v846oeab/1/

get the select's values which are the classes you are looking for
toggle the boxes that have both classes
If you have more selection criteria, we should loop, but here we just look at class1 and class2
$(function() {
const $sels = $("select");
const $boxes = $(".box");
$("#search").on("click", function() {
const vals = $sels.map(function() { return this.value }).get()
$boxes.each(function() {
const show = $(this).hasClass(vals[0]) && $(this).hasClass(vals[1]);
$(this).toggle(show)
});
}).click();
});
.box {
color: #fff;
padding: 20px;
display: none;
margin-top: 20px;
}
.red {
background: #ff0000;
}
.green {
background: #228B22;
}
.blue {
background: #0000ff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="col-5">
<select class="form-control">
<option value="all">All</option>
<option value="flower">flower</option>
<option value="fish">fish</option>
<option value="toy">toy</option>
</select>
</div>
<div class="col-2">
<button id="search" class="btn btn-primary w-100">Search</button>
</div>
</div>
<div class="red all flower box">Red flower</div>
<div class="red all fish box">red fish</div>
<div class="green all toy box">green toy</div>
<div class="blue all toy box">blue toy</div>
<div class="blue all flower box">blue flower</div>

how to do dependent dropdown by only storing primarykey data that are already related to each other?

I have a table whose data are interconnected with other tables, I want to make a dependent dropdown to store the primarykey id with the selected option related
[
<!DOCTYPE html>
<html>
<head>
<title>Ajax Dynamic Dependent Dropdown in Laravel</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
.box{
width:600px;
margin:0 auto;
border:1px solid #ccc;
}
</style>
</head>
<body>
<br />
<div class="container box">
<h3 align="center">Ajax Dynamic Dependent Dropdown in Laravel</h3><br />
<form action="{{ url('ajaxRequestPost') }}" enctype="multipart/form-data" method="POST">
{{ csrf_field() }}
<div class="form-group">
<select name="unit_kerja" id="unit_kerja" class="form-control input-lg dynamic select2" data-dependent="nama_program">
<option value="">Select Country</option>
#foreach($trnpagu as $tp)
<option value="{{ $tp->unit_kerja}}">{{ $tp->unit_kerja }}</option>
#endforeach
</select>
</div>
<br />
<div class="form-group">
<select name="nama_program" id="nama_program" class="form-control input-lg dynamic select2" data-dependent="nama_kegiatan">
<option value="">Select State</option>
</select>
</div>
<br />
<div class="form-group">
<select name="nama_kegiatan" id="nama_kegiatan" class="form-control input-lg dynamic select2" data-dependent="nama_sub_kegiatan">
<option value="">Select City</option>
</select>
</div>
<br>
<div class="form-group">
<select name="nama_sub_kegiatan" id="nama_sub_kegiatan" class="form-control input-lg dynamic select2" data-dependent="keterangan">
<option value="">Select City</option>
</select>
</div>
<br>
<div class="form-group">
<select name="keterangan" id="keterangan" class="form-control input-lg dynamic select2" data-dependent="uraian_bas">
<option value="">Select City</option>
</select>
</div>
<br>
<div class="form-group">
<select name="uraian_bas" id="uraian_bas" class="form-control input-lg dynamic select2" data-dependent="unit_layanan">
<option value="">Select City</option>
</select>
</div>
<br>
<div class="form-group">
<select name="unit_layanan" id="unit_layanan" class="form-control input-lg dynamic select2" data-dependent="standar_kegiatan">
<option value="">Select City</option>
</select>
</div>
<br>
<div class="form-group">
<select name="standar_kegiatan" id="standar_kegiatan" class="form-control input-lg select2" ">
<option value="">Select City</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-success " type="submit">Kirim</button>
</div>
</form>
<br />
<br />
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('.dynamic').change(function(){
if($(this).val() != '')
{
var select = $(this).attr("id");
var value = $(this).val();
var dependent = $(this).data('dependent');
var _token = $('input[name="_token"]').val();
$.ajax({
url:"{{ route('dynamicdependent.fetch') }}",
method:"POST",
data:{select:select, value:value, _token:_token, dependent:dependent},
success:function(result)
{
$('#'+dependent).html(result);
}
})
}
});
$('#unit_kerja').change(function(){
$('#nama_program').val('');
$('#nama_kegiatan').val('');
$('#nama_sub_kegiatan').val('');
$('#keterangan').val('');
$('#uraian_bas').val('');
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#nama_program').change(function(){
$('#nama_kegiatan').val('');
$('#nama_sub_kegiatan').val('');
$('#keterangan').val('');
$('#uraian_bas').val('');
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#nama_kegiatan').change(function(){
$('#nama_sub_kegiatan').val('');
$('#keterangan').val('');
$('#uraian_bas').val('');
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#nama_sub_kegiatan').change(function(){
$('#keterangan').val('');
$('#uraian_bas').val('');
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#keterangan').change(function(){
$('#uraian_bas').val('');
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#uraian_bas').change(function(){
$('#unit_layanan').val('');
$('#standar_kegiatan').val('');
});
$('#unit_layanan').change(function(){
$('#standar_kegiatan').val('');
});
});
</script>
<script>
$(document).ready(function() {
$('.select2').select2();
});
</script>
]1
example: if I select id_unit_kerja = 1 then the second option is id_program = 1 then choose id_kegiatan = 6 then select id_sub_kegiatan only appear = 2,6,8,9 then on id_sub_kegiatan activity select 8 then select id_mak = 3 then select id_bas = 6 then select id_unit_layanan = 2 and in the id_standar_kegiatan there are only choices 75 & 86, we choose id_standar_kegiatan = 86 then the one hided id_trnpagu = 7.
how to keep id_trnpagu = 7 using dependent dropdown
or is there another way?
below this table with fields that are interconnected with other tables
enter image description here
can you help me to solve this problem?

multiple selectpicker, disable option if selected option in another one

I have multiple select, and user can add more than select (make clone).
In every select includes option, and the same in all select,
on click add button make clone select div.
<select>
<option value="en">English</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
and more,...
I need to make that, when i select English from select one, Disabling the rest.
var stdCountries = $("#countriesContainer").children(".countries").first().clone('.add');
$(document).on('click', '.add',function() {
append_countries();
});
function append_countries() {
var objHtml = stdCountries.clone('.add');
$("#countriesContainer").append(objHtml);
$('.m_selectpicker').selectpicker();
}
/////////////////////////////////////////////////////////
$(".m_selectpicker").selectpicker();
$(document).on("click", ".remove", function(){
if($('#countriesContainer .countries').length > 1)
{
$(this).closest(".countries").remove();
}
else
{
generate('info', 'error');
}
});
$(document).on("change", ".m_selectpicker", function() {
$(this).parents('.countries').find('.lang').attr('name', 'name' + '[' + this.value + ']');
$(this).parents('.countries').find('.lang').attr('value', this.value);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.5/css/bootstrap-select.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<form class="m-form m-form--fit m-form--label-align-right" id="m_form_1" method="post">
<div class="m-portlet__body">
<div id="countriesContainer">
<div class="form-group m-form__group row countries">
<label class="col-form-label col-lg-2">Language</label>
<div class="col-2">
<select class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
</div>
<div class="col-lg-6">
<input type='text' class="form-control m-input lang" name="name[]" value=""/>
</div>
<div class="col-2">
<a href="javascript:;" class="btn btn-brand m-btn m-btn--custom add">
add
</a>
<a href="javascript:;" class="btn btn-danger m-btn m-btn--custom remove">
remove
</a>
</div>
</div>
</div>
</div>
</form>
if you any idea please to help me,
Thanks you
Regards.

<select id="selectOne" class="form-control m-bootstrap-select m_selectpicker changeLanguage" data-live-search="true" name="language">
<option value="en">Englsih</option>
<option value="ar">Arabic</option>
<option value="tr">Turkey</option>
</select>
Js
$(document).on("change", "#selectOne", function(){
if($('#selectOne').val() == 'en'){
$('select:not("#selectOne")').attr('disabled', true);
}else{
$('select:not("#selectOne")').attr('disabled', false);
}
});

Cloning select2 options

I am trying to clone a select2 with it's options but it doesn't seem to work.
I tried to destroy before recreating, to remove the span before recreating, but nothing works. Here is the basic code.
HTML :
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="select2" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="select2" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>
Javascript :
function addRow() {
var div = $('div[id^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
div.after( clone );
}
$(".select2").select2();
Here is a fiddle containing my problem :
https://jsfiddle.net/L5mn63g7/25/
So any idea what could the problem be? To be able to clone select2 WITH it's options.

Remove span tags before cloning and rebind select2 to the cloned dropdowns.
Hope it will help you.
function addRow() {
var div = $('div[id^="row"]:last');
var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
var clone = div.clone().prop('id', 'row_'+num );
clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});
clone.find("span").remove();
clone.find(".select2").select2();
clone.find(".select2-container").css("width","300px")
div.append( clone );
}
$(".select2").select2();
select {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="select2" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="select2" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>

You have to destroy select2 first before cloning and change the name of selector for select2 to something other. Here is working solution
function addRow() {
$('.items').select2("destroy");
var div = $('div[id^="row"]:last');
var num = parseInt(div.prop("id").match(/\d+/g), 10) + 1;
var $clone = div.clone().prop('id', 'row_' + num);
$clone.find('[id]').each(function() {
var $this = $(this);
$this.prop('id', $this.prop('id').split('_')[0] + '_' + num);
});
div.after($clone);
$('.items').select2();
}
$(".items").select2();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>
<div class="container">
<div class="row" id="row_0">
<div class="col-md-12">
<form id="form_0" onsubmit="return false;">
<select class="items" name="test1" id="test1_0">
<option value="o_test">o_test1_1</option>
<option value="o_test">o_test1_2</option>
<option value="o_test">o_test1_3</option>
</select>
<select class="items" name="test2" id="test2_0">
<option value="o_test">o_test2_1</option>
<option value="o_test">o_test2_2</option>
<option value="o_test">o_test2_3</option>
</select>
<button onclick="addRow()">clone</button>
</form>
</div>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Clone Bootstrap-select in the same page - javascript

Related

Why is chosen preventing a JavaScript conditional from working properly?

How to show and hide Div by mutiple Select form after submission

how to do dependent dropdown by only storing primarykey data that are already related to each other?

multiple selectpicker, disable option if selected option in another one

Cloning select2 options

Categories

Resources