از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
سرفصلهای مطلب
معرفی
در این بایت، روش افزودن گزینه‌ها به a را بررسی خواهیم کرد <select> لیست کشویی با استفاده از جی کوئری این <select> عنصر عنصری است که اغلب در فرم‌های HTML استفاده می‌شود و به کاربران این امکان را می‌دهد تا یک گزینه را از یک لیست از پیش تعریف‌شده انتخاب کنند. با این حال، موقعیت‌های زیادی وجود دارد که باید به صورت پویا گزینه‌هایی را به لیست خود اضافه کنید، و اینجاست که jQuery وارد عمل می‌شود.
عناصر در HTML را انتخاب کنید
این <select> عنصر در HTML یک لیست کشویی از گزینه ها را برای کاربر ایجاد می کند. هر گزینه در <select> عنصر با یک تعریف می شود <option> برچسب زدن در اینجا یک مثال ساده آورده شده است:
<select id="fruits">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
در این مثال، کاربر می تواند بین سیب، موز یا گیلاس یکی را انتخاب کند. این value ویژگی در <option> تگ چیزی است که هنگام ارسال فرم ارسال می‌شود و معمولاً یک قالب کدپسندتر از گزینه است (مانند ID، Slug و غیره).
چرا از jQuery برای اضافه کردن استفاده کنیم؟ <select> گزینه ها؟
دلایل زیادی وجود دارد که ممکن است لازم باشد گزینه هایی را به خود اضافه کنید <select> لیست کشویی به صورت پویا، پس از page بارگیری کرده است. به عنوان مثال، فرض کنید که شما داده‌ها را از یک سرور واکشی می‌کنید و می‌خواهید فهرست کشویی خود را بر اساس آن پر کنید. روی داده های برگشتی jQuery می تواند این کار را بسیار آسان تر کند. این کار را با ساده کردن مواردی مانند پیمایش و دستکاری سند HTML، مدیریت رویداد و Ajax انجام می دهد.
افزودن یک گزینه به <select> با جی کوئری
افزودن یک گزینه به a <select> عنصر با jQuery بسیار ساده است. ابتدا عنصر را انتخاب می کنید و سپس یک را اضافه می کنید <option> به آن این کد برای انجام آن است:
$(document).ready(function() {
$('#fruits').append(new Option('Grapes', 'grapes'));
});
در این کد، یک گزینه جدید با متن “Grapes” و مقدار “grapes” به لیست کشویی “fruits” اضافه می کنیم. وقتی سند آماده شد (یعنی وقتی سند HTML بارگذاری شد)، گزینه جدید به <select> عنصر با شناسه “میوه”.
توجه داشته باشید: این $(document).ready() تابع تضمین می کند که اسکریپت پس از بارگیری کامل سند اجرا می شود. این امر ضروری است زیرا اسکریپت باید عناصر HTML را که باید هنگام اجرای اسکریپت وجود داشته باشند، دستکاری کند.
اکنون، اگر به لیست کشویی خود نگاه کنید، می بینید که «انگور» به عنوان یک گزینه اضافه شده است. به همین سادگی! در بخش بعدی، روش اضافه کردن چندین گزینه به طور همزمان، حذف گزینه ها و اصلاح گزینه های موجود با استفاده از jQuery را بررسی خواهیم کرد. گوش به زنگ باشید!
اضافه کردن گزینه های متعدد به <select> با جی کوئری
وقتی صحبت از اضافه کردن چندین گزینه به a می شود <select> عنصر، jQuery آن را یک نسیم می کند. این .append() روش در اینجا مفید است. فرض کنید مجموعه ای از گزینه ها را دارید که می خواهید به آن اضافه کنید <select> عنصر در اینجا روش انجام این کار آمده است:
var fruits = ({
text: "Strawberry",
value: "strawberry"
}, {
text: "Watermelon",
value: "watermelon"
}, {
text: "Peach",
value: "peach"
});
$.each(fruits, function(idx, fruit) {
$('#fruits')
.append($('<option>')
.text(fruit.text)
.attr('value', fruit.value));
});
در این مثال، #fruits شناسه شماست <select> عنصر این $.each() تابع بیش از fruits آرایه و برای هر میوه، یک میوه جدید ایجاد می کند <option> عنصر با متن و مقدار بر این اساس تنظیم شده است.
حذف گزینه ها از <select> با جی کوئری
ممکن است مواقعی پیش بیاید که بخواهید گزینه ها را از a حذف کنید <select> عنصر باز هم، jQuery چندین راه برای انجام این کار ارائه می دهد. یکی از ساده ترین روش ها استفاده از .remove() تابع.
$('#fruits option(value="peach")').remove();
این گزینه با مقدار “هلو” را از شما حذف می کند <select> عنصر خیلی سرراست، درست است؟
توجه داشته باشید: شما همچنین می توانید استفاده کنید :selected انتخابگر برای حذف گزینه انتخاب شده فعلی. مثل این: $('#fruits option:selected').remove();
اصلاح گزینه ها در <select> با جی کوئری
تغییر متن یا مقدار یک گزینه در a <select> عنصر به همین راحتی است. می توانید استفاده کنید .text() و .val() روش هایی برای تغییر متن و مقدار یک گزینه به ترتیب. در اینجا به این صورت است:
$('#fruits option(value="apple")').text('Forbidden Fruit').val('forbidden-fruit');
با این کار متن گزینه با مقدار “سیب” به “میوه ممنوعه” و مقدار آن به “میوه ممنوعه” تغییر می کند.
نتیجه
کار با <select> عناصر در jQuery زمانی که روش ها را یاد بگیرید بسیار ساده است. از افزودن گزینه‌های متعدد، حذف گزینه‌ها تا اصلاح گزینه‌های موجود – jQuery همه روش‌ها را برای آسان کردن این کارها فراهم می‌کند.
(برچسب ها برای ترجمه)# جاوا اسکریپت
منتشر شده در 1402-12-29 18:19:03
