لوگو لوگوی تاریک
کامپوننت ها

لیست باکس دوتایی

Dual Listbox یک افزونه جاوااسکریپت خالص است که کادر انتخاب معمولی را به یک لیست باکس دوتایی قابل جستجو تبدیل می کند که در آن کاربران می توانند گزینه ها را بین دو پنل انتخاب جابجا کنند.

برای اطلاعات بیشتر لطفا به گیت هاب افزونه مراجعه کنید.

پایه

ما به تگ select با ویژگی multiple نیاز داریم تا لیست باکس دوتایی را تلفیق کنیم.

مثال کد
<select id="basic-listbox" 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>
با برچسب های سفارشی

برای تنظیم برچسب های سفارشی لطفا این بخش از صفحه گیت هاب را بررسی کنید. می توانید از کدهای html به عنوان مقدار استفاده کنید.

مثال کد
<select id="custom-labels-listbox" 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>
از قبل انتخاب شده

باید از ویژگی selected در تگ های option استفاده کنید.

مثال کد
<select id="preselected-listbox" 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>
بدون گزینه جستجو

لطفا قسمت js از مثال کد زیر را بررسی کنید. باید این کلاس .dual-listbox__search--hidden را در گزینه جستجو اضافه کنید.
همچنین می توانید این بخش از صفحه گیت هاب را بررسی کنید

مثال کد
<select id="nosearch-listbox" data-search="false" 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>
مثال کد
// کد جاوااسکریپت
let nosearchListbox = new DualListbox('#nosearch-listbox');
    nosearchListbox.search.classList.add('dual-listbox__search--hidden');
© تمام حقوق محفوظ است. فارسی و راستچین سازی شده توسط فرشید ترنیان