jQuery: احصل على القيم من قوائم محددة متعددة في كل مرة يتم فيها اختيار خيار جديد

Question

أقوم ببناء نموذج عرض أسعار مباشر مع jQuery ، باستخدام سلسلة من القوائم المختارة. لقد توصلت إلى الكود أدناه ، والذي يمسك بالقيم الافتراضية من كل قائمة SELECT ويضيفها معًا:

$(document).ready(function(){
 $('select > option:selected').each(function() {
  var value = $(this).attr('label');

  total = parseFloat(total) + parseFloat(value);
  total = total.toFixed(2);
 });
 printTotal(total); // prints the total price
});

المشكلة الوحيدة هي أن هذا يعمل فقط عند تحميل الصفحة. أود أن يتم تحديث السعر في كل مرة يتم تحديد قيمة جديدة في أي من القوائم المحددة (هناك 6).

حاولت إضافة $ ("SELECT"). Change (function () {...} مع الزناد (كما هو موضح في رمز مثال هنا) ولكن هذا يضيف كل القيم لكل من قوائم الاختيار (أي ، المجموع هو 6x ما ينبغي أن يكون).

لقد بحثت في المستندات ولكن لا يمكنني تحديد أي حدث لاستخدامه. هل أستطيع مساعدتك؟

عينة HTML إذا كانت تساعد:

<select id="colors">
 <option label="25.00" value="XYZ">1 color</option>
 <option label="50.50" value="ABC">2 colors</option>
 <option label="75.75" value="MNO">3 colors</option>
</select>

Answer 1

مات ، أعتقد أنك أثارت شيئًا في ذهني ، لأنني اكتشفت ذلك - على الأقل ، يعمل حتى الآن.

هنا هو الرمز الذي يفعله:

$(document).ready(function(){
    $('select').change(function() {
        var total = 0;
        $('select > option:selected').each(function() {
            var value = $(this).attr('label');

            total = parseFloat(total) + parseFloat(value);
            total = total.toFixed(2);
        });
        printTotal(total);
    });
});

جاء إلى وضع إجمالي var = 0 قطعة ، والتي يجب إعادة تعيينها في كل مرة يتم فيها اختيار جديد.

Answer 2

عند الاختبار داخل change اتصل ، تحتاج إلى التأكد من أنك تبحث optionق في سياق select العنصر الذي نقرت عليه.

$('select').change(function() {
    var total = 0;

    // note the second parameter passed to the $() function below
    $('option:selected', $(this)).each(function() {
        var value = $(this).attr('label');
        total += parseFloat(value).toFixed(2);
    });
    printTotal(total);
});