لدي مشكلة في <option onclick=

18 مشاهدة ولا رد هههههههه طيب اي حدي يدينى امل ان ممكن تنحل المشكل

السلام عليكم

- ربما من شاهد موضوعك زائر أو عضو ليس من إختصاصه الـ javaScript أو ليس لديه الوقت الكاف للرد

بالمناسبة هذه الإحصائية الحالية للمنتدى وأنا أكتب الموضوع:

اقتباس

2015 المتواجدون الآن (خلال الـ 15 دقيقة الماضية)

14 عضو, 2000 زائر, 1 عضو متخفي

المشكلة بسبب الخطأ عند إستخدام الحدث onClick مع خصائص القائمة المنسدلة ولكن حدث القائمة هو حدث تَغيُر القيمة onChange ويكون للعنصر select , ويمكن داخل الحدث إستدعاء دالة ولتكن display و this تعني أن هذه الدالة ستأخذ وسيط وهو العنصر الحالي أي select كالتالي:

<script>
    function display(element){
        if(element.value == 1){
            document.getElementById("newestentries").style.display='block';
            document.getElementById("youngesttrees").style.display='none';
        }else if(element.value == 2){
            document.getElementById("newestentries").style.display='none';
            document.getElementById("youngesttrees").style.display='block'
        }
    }
</script>
<form >
<select name="sel" onChange="display(this)" >
<option  value="3">رتب حســـب</option>
<option value="1">تصاعدي</option>
<option  value="2">تنازلي</option>
</select>       
</form>
<div id="newestentries" style="display: block">تصاعدي</div>
<div id="youngesttrees" style="display: none">تنازلي</div>

اولا احب اشكرك على ردك الجميل وفعلا لم اخذ بالى من موضوع الزوار هذا

بالفعل اشتغلت جزاك الله خيراً لكن اود ان استفسر اكثر واعذرنى ليس طمعا ولكن لقله معرفتى بالامر

لو اردت ان ازيد عدد الاختيارات مثلا هنخليهم 4 بدل 2 كيف سيكون الامر ؟

الحقيقه انا قمت بالتطبيق على اساس كلامك لانى لا احب اخد كوبي وبست لازم اعرف كل شيئ عشان اقدر اتعلمه بدل ماهو قص ولزق وخلاص وقمت بالتطبيق على هذا الشكل ولكن على اساس 4 اختيارات وليس 2 فهل تطبيقي صحيح اخي الفاضل

<script>
    function display(element){
        if(element.value == 1){
            document.getElementById("newestentries").style.display='block';
            document.getElementById("youngesttrees").style.display='none';
            document.getElementById("newestentries1").style.display='none';
             document.getElementById("youngesttrees1").style.display='none';
        }else if(element.value == 2){
            document.getElementById("newestentries").style.display='none';
            document.getElementById("youngesttrees").style.display='block';
            document.getElementById("newestentries1").style.display='none';
             document.getElementById("youngesttrees1").style.display='none';
            
           }

            if(element.value == 3){
            document.getElementById("newestentries1").style.display='block';
            document.getElementById("youngesttrees1").style.display='none';
            document.getElementById("newestentries").style.display='none';
             document.getElementById("youngesttrees").style.display='none';
        }else if(element.value == 4){
            document.getElementById("newestentries1").style.display='none';
            document.getElementById("youngesttrees1").style.display='block';
             document.getElementById("newestentries").style.display='none';
             document.getElementById("youngesttrees").style.display='none';
        }
    }
</script>
<form >
<select name="sel" onChange="display(this)" >
<option value="1">من الاحدث للاقدم</option>
<option value="2">من الاقدم للاحدث</option>						
<option value="3">اعلى الاسعار اولا</option>
<option value="4">ادنى الاسعار اولا</option>						
</select>
<div id="newestentries" style="display: block">من الاحدث للاقدم</div>
<div id="youngesttrees" style="display: none">من الاقدم للاحدث</div>
<div id="newestentries1"  style="display: none">اعلى الاسعار اولا</div>
<div id="youngesttrees1" style="display: none">ادنى الاسعار اولا</div>

السلام عليكم

نصيحة: يرجى المرور سريعاً على أساسيات التعامل مع إحدى مكتبات لغة javaScript , فهي ستسهل عملية كتابة الأكواد بشكل أفضل وتطبيق تأثيرات كثيره بكود قليل جداً , وشعار مكتبة jQuery الذي سأستخدمها حالياً هو "أكتب القليل ونفذ الكثير".

ملاحظة: هذه المكتبة ستضمن لك التوافق مع أغلب المتصفحات أي لن تحتاجي كتابة مزيد من الأكواد لتجعلي كودك يعمل على جميع المتصفحات .

سأمر سريعاً على أساسيات التعامل مع هذه المكتبة:

- أولاً: تضمين المكتبة .

-ثانياً: تكتب أكواد jQuery داخل الدالة بالشكل التالي :

$(function(){    // jQuery code here});

- المُختار selector وهذا الرابط سيفيدك في فهم كيفية عمله وهو أساس التعامل مع مكتبة jQuery .

- دوال الأحداث كـحدث الضغط click حدث التغيير change وحدث المرور hover وأحداث أخرى ...

- تكتب الأحداث بعد إختيار الـ selector لتطبيق الحدث عليه بإستخدام النقطة . وتأخذ دوال الأحداث وسيط وهو دالة تكتب داخلها الأكواد التي تريدها عند تنفيذ هذا الحدث .

أمثلة :

$('#myID').click(function(){
    // كود حدث الضغط عند الضغط على العنصر المختار
});

- أحداث التأثيرات كـ hide لإخفاء العناصر و show لإظهارها وتأخذ وسيط هو زمن تنفيذ هذا الحدث , وأحداث كثيرة أخرى بتأثيرات مختلفة على العناصر .

بعد هذه المقدمة سيكون الكود في الأعلى كالتالي:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    // دالة حدث تحميل الصفحة
    $(function(){
    
        // إخفاء جميع العناصر
        $('#productsList > div').hide();
        
        // إظهار العنصر الأول
        $('#productsList #new2old').show();
        
        // دالة حدث تغير قيمة القائمة
        $('select[name=sel]').change(function(){
            $('#productsList > div').hide();
            $('#productsList #'+$(this).val()).show(500);
        });
    });
</script>
<form >
<select name="sel">
<option value="new2old">من الاحدث للاقدم</option>
<option value="old2new">من الاقدم للاحدث</option>                        
<option value="height2low">اعلى الاسعار اولا</option>
<option value="low2height">ادنى الاسعار اولا</option>
</select>       
</form>
<div id="productsList">
    <div id="new2old">من الاحدث للاقدم</div>
    <div id="old2new">من الاقدم للاحدث</div>
    <div id="height2low">اعلى الاسعار اولا</div>
    <div id="low2height">ادنى الاسعار اولا</div>
</div>

- وبهذا الكود يمكن تنفيذ الأمر بسهولة وإنت أردت إضافة المزيد سيكون الأمر أسهل .

اشكرك جزيل الشكر اخي الفاضل على ردك والحقيقه استفدت كثيراً من الكود الذى وضعته لي وبالفعل نفعنى

ايضا اردت شكرك بشكل مناسب ووضعت هذا الموضوع بقسم البرمجة لتتويج شرحك لي لانه جعلنى اتمم كود برمجي كنت ابحث عنه والحقيقه لم اجدة ولم اكن لاتم العمل به الا بعد وضعك للكود الخاص بالجي كويري

شكرا لك

ارجو مشاهدة الرابط الخاص بكم  من هنا

شكراً لكِ على هذا الإطراء , والحمد لله أنك إستفدتي من ردي

- شاهدت الموضوع , سلمت يداك على هذا الطرح وبالتأكيد الكثير يحتاج مثل هذا الأمر في برمجياته , أرجوا أن تكون هذه بدايك في طرح ما تعلمتيه من علم لإخوانك هنا في المنتدى عملاً بقول رسولنا الكريم -صلى الله عليه وسلم-"إذا مات الإنسان  إنقطع عمله إلا من ثلاثة : صدقة جارية أو علم ينتفع به أو ولد صالح يدعوا له"

دمتي في أمان الله