getElementsByClassName لا تعمل بالشكل المطلوب وتعيد أول عنصر فقط

بتاريخ 1 ساعة قال محمد المصري5:

متبقي لي مشكلة انه زي التفاصيل بياخد id اول قائمة فقط

هذا بسبب تمرير الدليل 0 بشكل دائم، يمكن تمرير id مثلا حسب رقم القائمة

function showDetails(id) 
                    ^^^^^
var sel = document.getElementsByClassName('sedra')[id]; 
                                                 ^^^^^^

حيث أن getElementsByClassName تعيد مصفوفة بجميع العناصر التي لها نفس الصنف، هنا عليك تحديد من هو المقصود وتمييزه بطريقة ما

إن قمت بتطبيق onclick على عنصر ما يمكنك الوصول له عن طريق this :

onclick="myFunction(this)"

ثم يمكنك الوصول للعناصر الأب له أو أي منهم

حيث يتم استقبال العنصر بأي اسم متغير مثلا:

showDetails(element) {
	element ...
}

إن كان لديك أكثر من قائمة منسدلة وتريد أن تقوم بالمرور عليهم جميعًا ، فيمكنك القيام بذلك من خلال حلقة for كالتالي:

function showDetails() {
  var sels = document.getElementsByClassName('sedra');
  
  for (var sel of sels) {
    var selIndex = sel.selectedIndex;
    
    // تخطي القائمة في حالة كان الإختيار هو رقم 0
    if (selIndex == 0) {
      continue;
    }

    var option = sel.options[selIndex].value;

    window.open("accessories/print/print-view.php?id="+option);
    return;
  }
  
  // تم نقل الكودالشرط التالي خارج حلقة التكرار لأن  في حالة وجود أكثر من قائمة منسدلة، فسيتم تحديد أحدها فقط
  // في حالة لم يتم اختيار أي قيمة من أي قائمة منسدلة
  alert("الرجاء اختيار قيمة من القائمة المنسدلة");
  
}

الكود السابق سوف يقوم بالمرور على كل العناصر التي لديها الصنف sedra وسيقوم بجلب القيمة المختارة، وفي حالة كانت 0 سوف يتم تخطيها، إلى أن يتم العثور على قيمة معينة ثم سيتم إستخدام window.open لفتح الصفحة، وفي حالة لم يكن هناك أي اختيار في أي من القوائم فسوف يتم إظهار رسالة عبر alert.

بتاريخ 20 دقائق مضت قال Wael Aljamal:

هذا بسبب تمرير الدليل 0 بشكل دائم، يمكن تمرير id مثلا حسب رقم القائمة

function showDetails(id) 
                    ^^^^^
var sel = document.getElementsByClassName('sedra')[id]; 
                                                 ^^^^^^

حيث أن getElementsByClassName تعيد مصفوفة بجميع العناصر التي لها نفس الصنف، هنا عليك تحديد من هو المقصود وتمييزه بطريقة ما

إن قمت بتطبيق onclick على عنصر ما يمكنك الوصول له عن طريق this :

onclick="myFunction(this)"

ثم يمكنك الوصول للعناصر الأب له أو أي منهم

حيث يتم استقبال العنصر بأي اسم متغير مثلا:

showDetails(element) {
	element ...
}

 

هو نظريا انا استوعبت الفكرة ، لكن هل استأذنك تساعدني في فهمها اكتر بتعديلك على الكود لاقرأه و افهم بشكل عملي؟

معلش هاتعبك معايا

بتاريخ 3 ساعات قال محمد المصري5:

معلش هاتعبك معايا

إن بنية الصفحة لديك، غير مفهومة تماماً، لديك اكثر من select وتريد إظهار بيانات من خلال زر وحيد حيث على هذا الزر أن يعرف اي select تغيرت قيمة التحديد فيه.

أفضّل وضع متغير عام يحمل قيمة عنصر select المختار، يتم فيه إسناد هذا الselect من خلال دالة onchange نضعها لكل عناصر select حيث يتم جعل المتحول العام يحمل قيمة this الممرة ل  on change مع تغيير اي عنصر select  بطريقة مشابهة لما سبق...

بتاريخ 10 ساعات قال Wael Aljamal:

إن بنية الصفحة لديك، غير مفهومة تماماً، لديك اكثر من select وتريد إظهار بيانات من خلال زر وحيد حيث على هذا الزر أن يعرف اي select تغيرت قيمة التحديد فيه.

أفضّل وضع متغير عام يحمل قيمة عنصر select المختار، يتم فيه إسناد هذا الselect من خلال دالة onchange نضعها لكل عناصر select حيث يتم جعل المتحول العام يحمل قيمة this الممرة ل  on change مع تغيير اي عنصر select  بطريقة مشابهة لما سبق...

 

طيب انا حليتها الحمد لله بدالة مختلفة شوية

$(document).ready(function() {
		$(document).on('change', '.sedra1', function() {
	var m=$(this).val();

    $('.button > a').attr('href', 'accessories/tatreez/tatreez-view.php?id=' + m );
});
});

و الحمد لله اشتغلت ، تبقى لي فقط إضافة الشرط انه لو كانت الvalue بتاعة selectbox فاضية ( يعني المستخدم لم يقم بتحديد اختيار ) تظهرله رساله تنبيه ، كما تعلمت منكم مسبقا

و قمت بمحاولة التالي لكنها لم تفلح

$(document).ready(function() {
		$(document).on('change', '.sedra1', function() {
	var m=$(this).val();
if( $(this).val() == '' ){
	alert("Please choose some option");
     return;
}else{
    $('.button > a').attr('href', 'accessories/tatreez/tatreez-view.php?id=' + m );
	}
});
});

بتاريخ 9 ساعات قال محمد المصري5:

قمت بمحاولة التالي لكنها لم تفلح

ضمن jQuery يتم تمرير this، لقراءة القيمة استخدم

this.value

مباشرة

أو

$(this).find(":selected").val()