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

بالطبع، يمكن استخدام 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. ويمكنك تعديل هذا المثال لتناسب احتياجاتك الخاصة.

يمكنك عرض الـ 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

يمكنك اضافة الخاصية 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>