اذهب إلى المحتوى
  • 0

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

Muhannad Bahurmoz

السؤال

السلام عليكم و رحمة الله و لبركاته,

أنشأت صفحة HTML تحتوي على form لتعديل البيانات و عند فتح الصفحة أريد البيانات المحفوظة مسبقًا تظهر كقيمة في مدخلات ال form ,

فعلتها باستخدام ال EJS و وضعت القيمة السابقة بداخل ال value attribute  لل input كما موضح في السطر رقم 39 الذي في الصورة , 

ولكنني استخدم ال select element أيضًا بداخل ال form , و كما تعلمون بداخل ال select element يوجد attribute يسمى selected 

و سؤالي هو : هل يمكنني استخدام ال selected attribute مع ال EJS ؟ , اذا نعم كيف ؟ ,

و اذا لا , إذًا هل يمكنني استخدام selected attribute بشكل ديناميكي ؟

p1.thumb.png.a494bc6c68f4d0574f99fa7ae4f9fa02.png

و شكرًا لكم 

(اعتذر على الإطاله)

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

بالطبع، يمكن استخدام selected attribute مع EJS بنفس الطريقة التي تستخدم بها value attribute. وأيضًا استخدام EJS لإدخال قيمة الخيارات ومن ثم استخدام selected attribute لتحديد الخيار الافتراضي.

هناك طريقتان لفعل ذلك ، يمكنك استخدام ثنائيات القيمة / النص كما يلي:

<select name="mySelect">
  <option value="1" <% if (value === "1") { %>selected<% } %>>Option 1</option>
  <option value="2" <% if (value === "2") { %>selected<% } %>>Option 2</option>
  <option value="3" <% if (value === "3") { %>selected<% } %>>Option 3</option>
</select>

أو يمكنك استخدام دالة مساعدة مخصصة لتنفيذ هذا الأمر بشكل أكثر كفاءة:

<select name="mySelect">
  <% options.forEach(function(option) { %>
    <option value="<%= option.value %>" <%= option.selected ? 'selected' : '' %>><%= option.text %></option>
  <% }); %>
</select>

في  المثال السابق، يتم استخدام دالة forEach لتكرار قائمة الخيارات وتعيين selected attribute إذا كانت الخيارات محددة. ثم تمرير القيمة والنص وحالة التحديد كمعلمات لكل option. ويمكنك تعديل هذا المثال لتناسب احتياجاتك الخاصة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك عرض الـ option باستخدام الـ  EJS واعطاء الـ selected للعنصر المحدد :

<select id="volume">

<%
var options = [ "1", "5", "10", "50", "75", "100" ];
for ( var i = 0; i < options.length; i++ )
{
    var selected = ( config[0].volume == i ) ? "selected" : "";
    %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><%
}
%>
</select>

لتفاصيل اكثر راجع النقاش التالي HTML select option with EJS

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

يمكنك اضافة الخاصية selected بشكل شرطي تتحقق فيه اولا من ما ان كانت القيمة المسندة لخيار ما هي نفسها الكائنة في الطلب.

يمكن ايضا القيام بالأمر عن طريق المرور على عناصر مصفوفة عناصرها هي الخيارات:

<select id="class">

<%
var options = [ "One", "Two", "Three", "Four", "Five"];
for ( var i = 0; i < options.length; i++ )
{
    var selected = ( obj.class == i ) ? "selected" : "";
    %><option value="<%=options[ i ] %>" <%=selected %>><%=i %></option><%
}
%>
</select>

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...