<select id="kt_dual_listbox_1" class="dual-listbox" multiple>
<option value="1">یک</option>
<option value="2">دو</option>
<option value="3">سه</option>
<option value="4">چهار</option>
<option value="5">پنج</option>
<option value="6">شش</option>
<option value="7">هفت</option>
<option value="8">هشت</option>
<option value="9">نه</option>
<option value="10">ده</option>
</select>
// کلاس definition
var KTDualلیستbox = function() {
// خصوصی functions
var initDualلیستbox = function() {
// لیست دوگانه
var listBoxes = دلار(".dual-listbox");
listBoxes.each(function() {
var دلارthis = دلار(this);
// get titles
var availableTitle = (دلارthis.attr("data-available-title") != null) ? دلارthis.attr("data-available-title") : "Available options";
var selectedTitle = (دلارthis.attr("data-selected-title") != null) ? دلارthis.attr("data-selected-title") : " انتخاب شده options";
// get button labels
var addLabel = (دلارthis.attr("data-add") != null) ? دلارthis.attr("data-add") : "Add";
var removeLabel = (دلارthis.attr("data-remove") != null) ? دلارthis.attr("data-remove") : "Remove";
var addهمهLabel = (دلارthis.attr("data-add-all") != null) ? دلارthis.attr("data-add-all") : "Add همه";
var removeهمهLabel = (دلارthis.attr("data-remove-all") != null) ? دلارthis.attr("data-remove-all") : "Remove همه";
// get options
var options = [];
دلارthis.children("option").each(function() {
var value = دلار(this).val();
var label = دلار(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = (دلارthis.attr("data-search") != null) ? دلارthis.attr("data-search") : "";
// init dual listbox
var dualلیستBox = new Dualلیستbox(دلارthis.get(0), {
addرویداد: function(value) {
console.log(value);
},
removeرویداد: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addدکمهمتن: addLabel,
removeدکمهمتن: removeLabel,
addهمهدکمهمتن: addهمهLabel,
removeهمهدکمهمتن: removeهمهLabel,
options: options,
});
if (search == "false") {
dualلیستBox.search.classلیست.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualلیستbox();
},
};
}();
jQuery(document).ready(function() {
KTDualلیستbox.init();
});
<select id="kt_dual_listbox_2" class="dual-listbox" multiple
data-available-title="مبدا گزینه ها"
data-selected-title="مقصد گزینه ها"
data-add="<i class='flaticon2-next'></i>"
data-remove="<i class='flaticon2-back'></i>"
data-add-all="<i class='flaticon2-fast-next'></i>"
data-remove-all="<i class='flaticon2-fast-back'></i>">
<option value="1">یک</option>
<option value="2">دو</option>
<option value="3">سه</option>
<option value="4">چهار</option>
<option value="5">پنج</option>
<option value="6">شش</option>
<option value="7">هفت</option>
<option value="8">هشت</option>
<option value="9">نه</option>
<option value="10">ده</option>
</select>
// کلاس definition
var KTDualلیستbox = function() {
// خصوصی functions
var initDualلیستbox = function() {
// لیست دوگانه
var listBoxes = دلار(".dual-listbox");
listBoxes.each(function() {
var دلارthis = دلار(this);
// get titles
var availableTitle = (دلارthis.attr("data-available-title") != null) ? دلارthis.attr("data-available-title") : "Available options";
var selectedTitle = (دلارthis.attr("data-selected-title") != null) ? دلارthis.attr("data-selected-title") : " انتخاب شده options";
// get button labels
var addLabel = (دلارthis.attr("data-add") != null) ? دلارthis.attr("data-add") : "Add";
var removeLabel = (دلارthis.attr("data-remove") != null) ? دلارthis.attr("data-remove") : "Remove";
var addهمهLabel = (دلارthis.attr("data-add-all") != null) ? دلارthis.attr("data-add-all") : "Add همه";
var removeهمهLabel = (دلارthis.attr("data-remove-all") != null) ? دلارthis.attr("data-remove-all") : "Remove همه";
// get options
var options = [];
دلارthis.children("option").each(function() {
var value = دلار(this).val();
var label = دلار(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = (دلارthis.attr("data-search") != null) ? دلارthis.attr("data-search") : "";
// init dual listbox
var dualلیستBox = new Dualلیستbox(دلارthis.get(0), {
addرویداد: function(value) {
console.log(value);
},
removeرویداد: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addدکمهمتن: addLabel,
removeدکمهمتن: removeLabel,
addهمهدکمهمتن: addهمهLabel,
removeهمهدکمهمتن: removeهمهLabel,
options: options,
});
if (search == "false") {
dualلیستBox.search.classلیست.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualلیستbox();
},
};
}();
jQuery(document).ready(function() {
KTDualلیستbox.init();
});
<select id="kt_dual_listbox_3" class="dual-listbox" multiple>
<option value="1">یک</option>
<option value="2" selected>دو</option>
<option value="3">سه</option>
<option value="4">چهار</option>
<option value="5">پنج</option>
<option value="6" selected>شش</option>
<option value="7">هفت</option>
<option value="8">هشت</option>
<option value="9">نه</option>
<option value="10">ده</option>
</select>
// کلاس definition
var KTDualلیستbox = function() {
// خصوصی functions
var initDualلیستbox = function() {
// لیست دوگانه
var listBoxes = دلار(".dual-listbox");
listBoxes.each(function() {
var دلارthis = دلار(this);
// get titles
var availableTitle = (دلارthis.attr("data-available-title") != null) ? دلارthis.attr("data-available-title") : "Available options";
var selectedTitle = (دلارthis.attr("data-selected-title") != null) ? دلارthis.attr("data-selected-title") : " انتخاب شده options";
// get button labels
var addLabel = (دلارthis.attr("data-add") != null) ? دلارthis.attr("data-add") : "Add";
var removeLabel = (دلارthis.attr("data-remove") != null) ? دلارthis.attr("data-remove") : "Remove";
var addهمهLabel = (دلارthis.attr("data-add-all") != null) ? دلارthis.attr("data-add-all") : "Add همه";
var removeهمهLabel = (دلارthis.attr("data-remove-all") != null) ? دلارthis.attr("data-remove-all") : "Remove همه";
// get options
var options = [];
دلارthis.children("option").each(function() {
var value = دلار(this).val();
var label = دلار(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = (دلارthis.attr("data-search") != null) ? دلارthis.attr("data-search") : "";
// init dual listbox
var dualلیستBox = new Dualلیستbox(دلارthis.get(0), {
addرویداد: function(value) {
console.log(value);
},
removeرویداد: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addدکمهمتن: addLabel,
removeدکمهمتن: removeLabel,
addهمهدکمهمتن: addهمهLabel,
removeهمهدکمهمتن: removeهمهLabel,
options: options,
});
if (search == "false") {
dualلیستBox.search.classلیست.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualلیستbox();
},
};
}();
jQuery(document).ready(function() {
KTDualلیستbox.init();
});
<select id="kt_dual_listbox_4" class="dual-listbox" data-search="false" multiple>
<option value="1">یک</option>
<option value="2">دو</option>
<option value="3">سه</option>
<option value="4">چهار</option>
<option value="5">پنج</option>
<option value="6">شش</option>
<option value="7">هفت</option>
<option value="8">هشت</option>
<option value="9">نه</option>
<option value="10">ده</option>
</select>
// کلاس definition
var KTDualلیستbox = function() {
// خصوصی functions
var initDualلیستbox = function() {
// لیست دوگانه
var listBoxes = دلار(".dual-listbox");
listBoxes.each(function() {
var دلارthis = دلار(this);
// get titles
var availableTitle = (دلارthis.attr("data-available-title") != null) ? دلارthis.attr("data-available-title") : "Available options";
var selectedTitle = (دلارthis.attr("data-selected-title") != null) ? دلارthis.attr("data-selected-title") : " انتخاب شده options";
// get button labels
var addLabel = (دلارthis.attr("data-add") != null) ? دلارthis.attr("data-add") : "Add";
var removeLabel = (دلارthis.attr("data-remove") != null) ? دلارthis.attr("data-remove") : "Remove";
var addهمهLabel = (دلارthis.attr("data-add-all") != null) ? دلارthis.attr("data-add-all") : "Add همه";
var removeهمهLabel = (دلارthis.attr("data-remove-all") != null) ? دلارthis.attr("data-remove-all") : "Remove همه";
// get options
var options = [];
دلارthis.children("option").each(function() {
var value = دلار(this).val();
var label = دلار(this).text();
options.push({
text: label,
value: value
});
});
// get search option
var search = (دلارthis.attr("data-search") != null) ? دلارthis.attr("data-search") : "";
// init dual listbox
var dualلیستBox = new Dualلیستbox(دلارthis.get(0), {
addرویداد: function(value) {
console.log(value);
},
removeرویداد: function(value) {
console.log(value);
},
availableTitle: availableTitle,
selectedTitle: selectedTitle,
addدکمهمتن: addLabel,
removeدکمهمتن: removeLabel,
addهمهدکمهمتن: addهمهLabel,
removeهمهدکمهمتن: removeهمهLabel,
options: options,
});
if (search == "false") {
dualلیستBox.search.classلیست.add("dual-listbox__search--hidden");
}
});
};
return {
// public functions
init: function() {
initDualلیستbox();
},
};
}();
jQuery(document).ready(function() {
KTDualلیستbox.init();
});
