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>
Related
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);
}
});
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>
There is a form that I wanted to clone this form every time the ADD button clicked. in this case form appended with previous values for inputs. I want each form work separately. Is there a way to append with empty values for inputs?
Here is my snippet :
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
Yes, just clear them in the cloned copy (see *** line):
$(document).ready(function() {
$(".Add").click(function() {
$(".formi")
.eq(0)
.clone()
.find("input").val("").end() // ***
.show()
.insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
That specific example uses find to find the input, val to clear its value, and then end to return to the original set of cloned elements so that show and insertAfter are run on that set (instead of the input(s)).
You should first clone the form and then reset the element values as follows. In your case input.
$(document).ready(function() {
$(".Add").click(function() {
var form = $(".formi").eq(0).clone();
form.find("input[type=text]").val("");
form.show().insertAfter(".formi:last");
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
You could select the last form after the clone then empty the value of the child inputs like :
$(".formi:last input").val('');
$(document).ready(function() {
$(".Add").click(function() {
$(".formi").eq(0).clone().show().insertAfter(".formi:last");
$(".formi:last input").val('');
});
$('.all').on('click', ".cancel", function() {
$(this).closest('.formi').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<span class="Add">Add+</span>
<div class="all">
<form class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button type="submit">ok</button>
<span class="cancel">Cancel</span>
</form>
</div>
I refactored some of your stuff because I had to do it differently in order to make it work the way i wanted it to, but here it is.
Here is the JSFiddle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"> </script>
<span class="Add">Add+</span>
<div class="all">
<div class="formi">
<input type="text" placeholder="name" value="Sarah" />
<select name="cars">
<option value="one">one</option>
<option value="two">two</option>
</select>
<button class="add">ok</button>
<span class="cancel">Cancel</span>
</div>
</div>
function addClickListener(){
arr = $(".add")
$(arr[arr.length - 1]).click(function(ev) {
var clone = ev.currentTarget.parentElement.cloneNode(true);
$('.all').append(clone);
addClickListener();
});
cancArr = $('.cancel');
$(cancArr[cancArr.length - 1])
.on('click', function() {
$(this).parent().remove();
});
}
addClickListener();
I have a text field and a dropdown. Whenever I change my DropDown list , accordingly textbox should get change.
my code
$('body').on('change', "#fieldType", function(){
var changeType = $(this).val();
console.log(changeType);
var rohit = $('.createDynamicBox.highLighted').find('input').attr("type=changeType");
console.log(rohit);
});
.formGroup{border:solid 1px red; margin-top:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">
<label for="singeText3U17">Single line text</label>
<input type="text" value="" id="singeText3U17">
</div>
<div class="formGroup">
<label for="fieldType">Field Type</label>
<select id="fieldType">
<option value="text">Text</option>
<option value="number">Number</option>
<option value="password">Password</option>
</select>
</div>
Use .prop("type",changeType) instead of attr() to change the input's type
$('body').on('change', "#fieldType", function(){
var changeType = $(this).val();
console.log(changeType);
var rohit = $('.createDynamicBox.highLighted').find('input').prop("type",changeType);
console.log(rohit);
});
.formGroup{border:solid 1px red; margin-top:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">
<label for="singeText3U17">Single line text</label>
<input type="text" value="" id="singeText3U17">
</div>
<div class="formGroup">
<label for="fieldType">Field Type</label>
<select id="fieldType">
<option value="text">Text</option>
<option value="number">Number</option>
<option value="password">Password</option>
</select>
</div>
You can use $('#singeText3U17').get(0).type = changeType;
try to this
$('body').on('change', "#fieldType", function(){
var changeType = $(this).val();
console.log(changeType);
var rohit = $('.createDynamicBox.highLighted').find('input').attr("type=changeType");
console.log(rohit);
$('#singeText3U17').get(0).type = changeType;
});
.formGroup{border:solid 1px red; margin-top:20px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div class="createDynamicBox highLighted" data="singleLineTextBtn">
<label for="singeText3U17">Single line text</label>
<input type="text" value="" id="singeText3U17">
</div>
<div class="formGroup">
<label for="fieldType">Field Type</label>
<select id="fieldType">
<option value="text">Text</option>
<option value="number">Number</option>
<option value="password">Password</option>
</select>
</div>
You can't change type attribute with attr method, because IE does not support fot this operation use prop instead.
var rohit = $('.createDynamicBox.highLighted').find('input').prop("type", changeType);
Firstly here's the fiddle
I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:
Adding images directly in each option but this plugin removes all html in
Used jquery after() to add image after the field but it does not work.
HTML Code:
<div class="col-sm-12">
<div id="vm" class="tab-pane fade in active">
<div class="panel panel-primary">
<div class="panel-body">
<form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<div class="col-md-8">
<div class="form-group">
<input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
<div class="controls">
<label for="Server0Vm">hosta0451483t</label>
<input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option value="ctrlr0451483t">ctrlr0451483t</option>
<option value="ipr0451483t">ipr0451483t</option>
<option value="ldap0451483t">ldap0451483t</option>
<option value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
jQuery Code:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: 'auto',
numberDisplayed:15,
onChange: function(element, checked) {
//console.log(element.attr('value') + checked);
$("ul.multiselect-container").find("input[type=checkbox]").each(function(){
//console.log(element.attr('value'));
var valueAttr = $(this).attr('value');
if (element.attr('value') == valueAttr) {
var checkParent = $(this).parent().parent().parent().hasClass('active');
//console.log(checkParent);
if (checkParent == false) {
$(this).removeAttr('disabled')
}else{
$(this).attr('disabled','disabled')
}
}
});
}
});
});
Any help would be appreciated.
You can use optionLabel option
optionLabel A callback used to define the labels of the options
$('.multiselect').multiselect({
enableHTML: true,
optionLabel: function(element) {
return '<img src="'+$(element).attr('data-img')+'"> '+$(element).text();
},
// ...
});
HTML:
<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
<optgroup>
<option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
<option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
<option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
<option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
</optgroup>
</select>
JSFiddle
You can try this:
$(function() {
$('#chkveg').multiselect({
includeSelectAllOption: true,
enableHTML: true,
optionLabel: function(element) {
return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
},
});
$('#btnget').click(function() {
alert($('#chkveg').val());
});
});
.multiselect-container>li>a>label {
padding: 4px 20px 3px 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple>
<option value="cheese" data-img="100/109">AAA</option>
<option value="tomatoes" data-img="100/108">BBB</option>
<option value="mozarella" data-img="100/107">CCC</option>
<option value="mushrooms" data-img="100/106">DDD</option>
<option value="pepperoni" data-img="100/105">EEE</option>
<option value="onions" data-img="100/110">FFF</option>
</select>
<br /><br />
<input type="button" id="btnget" value="Get Selected Values" />
</div>
</form>