كيف استخدم ال selected attribute بشكل ديناميكي (HTML & JS)

إذا كنت تقصد  أنك تريد تحديد الاختيار الافتراضي فيمكنك فعل ذلك عبر تحديد ال select باستخدام js ومن ثم اعطاء القيمة value للقيمة التي تريدها مثل :

document.querySelector("msSelect").value = "my value"

أما اذا كنت تقصد انك تريد عرض الاختيارات في داخل الـ select فيمكنك فعل ذلك بالشكل التالي :

const options = ["first" , "second" , "third"]
document.querySelector("msSelect").innerHTML = 
  `${
	  options.map(option =>  `<option value="${option}">${option}</option>`).join("")
  }`

حيث أن الـ ${} تمكنك من كتابة JS داخل النص والذي نستخدم له علامة التنصيص ` بدلاً من " أو '.

ما تريده هو تحديد قيمة محددة في عنصر select باستخدام الـ selected attribute بشكل ديناميكي في HTML و JavaScript، صحيح؟

1- أولاً علياسترجاع البيانات المحفوظة مسبقًا من localStorage باستخدام JavaScript.

2- تعيين قيمة المحددة في عنصر select باستخدام خاصية value في JavaScript.

إليك مثال:

HTML

<select id="mySelect">
  <option value="value1">قيمة 1</option>
  <option value="value2">قيمة 2</option>
  <option value="value3">قيمة 3</option>
</select>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // استرجاع القيمة المحفوظة مسبقًا من localStorage
  const selectedValue = localStorage.getItem('selectedValue');

  // التحقق مما إذا كان هناك قيمة محفوظة
  if (selectedValue) {
    // تعيين القيمة المحددة في عنصر select
    document.getElementById('mySelect').value = selectedValue;
  }
});

ما يحدث هو عند تحميل الصفحة، تسترجع القيمة المحفوظة مسبقًا من localStorage وتعيينها كقيمة محددة في عنصر select. يجب عليك تغيير 'selectedValue' في localStorage.getItem('selectedValue') إلى المفتاح الصحيح الذي تستخدمه لحفظ القيمة في localStorage.

تأكد من وضع الجزء الخاص بالتعيين في داخل الدالة التي تنفذها DOMContentLoaded حتى يتم تنفيذ العملية عند تحميل الصفحة بشكل صحيح.

يمكنك تحديد القيمة الافتراضية لعنصر select عن طريق استخدام خاصية selected attribute وذلك باستخدام القيمة المحفوظة مسبقاً في localStorage. على سبيل المثال، إذا كان لديك عنصر select يحمل اسم "colors" وتريد تحديد القيمة المحفوظة مسبقاً في localStorage بإسم "selected_color"، يمكنك استخدام الكود التالي:

<select name="colors">
  <option value="red" {{ localStorage.getItem("selected_color") === "red" ? "selected" : "" }}>Red</option>
  <option value="blue" {{ localStorage.getItem("selected_color") === "blue" ? "selected" : "" }}>Blue</option>
  <option value="green" {{ localStorage.getItem("selected_color") === "green" ? "selected" : "" }}>Green</option>
</select>

في هذا الكود، يتم استخدام تابع getItem() لفحص قيمة "selected_color" في localStorage ومقارنتها بقيمة كل خيار في عنصر select باستخدام عبارة التحكم الشرطي (ternary operator) لتعيين القيمة المحددة للخيار الصحيح. تعيين الـ selected attribute إذا كانت القيمتين متطابقتين وعدم تعيينه إذا كانت القيمتين غير متطابقتين.

وبهذه الطريقة، يتم تحديد الخيار الصحيح تلقائيًا استنادًا إلى القيمة المحفوظة مسبقًا في localStorage.

يرجى ملاحظة أن هذا الكود يعمل فقط عند استخدام إطار عمل خاص بجافاسكريبت مثل ReactJS

يمكنك استخدام ال js كما في التعليق السابق 

// جلب القيمة المحفوظة مسبقًا في الـ localStorage
var selectedValue = localStorage.getItem("selectedValue");

// تحديد القيمة المحفوظة مسبقًا في الـ localStorage في عنصر الـ select
var selectElement = document.getElementById("mySelect");
selectElement.value = selectedValue;

ولكن، هناك بعض التحسينات والإضافات التي يمكن إجراؤها على المثال السابق. يمكن استخدام الـ localStorage بشكل أكثر فعالية والتحقق من وجود القيمة المحفوظة مسبقًا في localStorage قبل تحديدها في عنصر select. فيما يلي بعض التحسينات:

• التحقق من وجود القيمة المحفوظة مسبقًا في localStorage:

قبل تحديد القيمة المحفوظة مسبقًا في عنصر select، يجب التحقق من وجود القيمة في localStorage أولاً باستخدام الـ if statement. هذا يساعد على تجنب تحديد قيمة فارغة في حالة عدم وجود قيمة محفوظة مسبقًا.

if(selectedValue !== null) {
  selectElement.value = selectedValue;
}

• إضافة اختيار افتراضي:

يمكن إضافة خيار افتراضي لعنصر select إذا لم يتم تحديد قيمة محفوظة مسبقًا في localStorage. يمكن استخدام الـ selectedIndex property لتحديد الخيار الافتراضي.

if(selectedValue !== null) {

  selectElement.value = selectedValue;

} else {

  selectElement.selectedIndex = 0;

}

باستخدام هذه التحسينات، يمكن جعل التطبيق أكثر فعالية ومرونة، وتجنب الأخطاء المحتملة في حالة عدم وجود قيمة محفوظة مسبقًا في localStorage.

لتحديد القيمة المحفوظة في localStorage في عنصر select، يمكنك استخدام خاصية selected بواسطة JavaScript. يليك طريقة لتحقيق ذلك: 

<select id="mySelect">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

document.addEventListener("DOMContentLoaded", function() {
  var mySelect = document.getElementById("mySelect");
  var selectedOption = localStorage.getItem("selectedOption");

  if (selectedOption) {
    mySelect.value = selectedOption;
  }

  mySelect.addEventListener("change", function() {
    localStorage.setItem("selectedOption", mySelect.value);
  });
});

1. يتم استدعاء الكود عندما تكتمل تحميل الصفحة باستخدام DOMContentLoaded event listener.
2. يتم الحصول على عنصر select باستخدام getElementById.
3. يتم استرجاع القيمة المحفوظة في localStorage باستخدام localStorage.getItem.
4. إذا وجدت قيمة محفوظة، يتم تعيينها كقيمة محددة في عنصر select باستخدام mySelect.value.
5. يتم إضافة event listener لعنصر select للتحقق من التغييرات. عندما يتم تحديد خيار جديد، يتم تحديث القيمة في localStorage باستخدام localStorage.setItem.

بهذه الطريقة، ستحصل على القيمة المحفوظة في localStorage وتحديدها في عنصر select عند فتح الصفحة، وستتم مزامنة التغييرات بين العنصر select و localStorage عند تحديد خيار جديد.