كيفية استخدام JavaScript أو jQuery لتحديد مسبقًا من عناصر القائمة متعددة القائمة؟

Question

لذلك ، لنفترض أن صفحتي تحتوي على قائمة من الفهارس "1،3،4،5،9،12" وعلبة قائمة متعددة مع 12 عنصرًا فيه.

ما هي الطريقة السريعة لاستخدام JavaScript لإخبار ListBox باختيار جميع العناصر في تلك الفهارس؟

كيف سيتم ذلك باستخدام jQuery؟

لذلك على سبيل المثال ، إذا حدد المستخدم الإعداد المسبق "caramel" المرتبط بـ "CandyBar" Listbox ، فسيختار جميع أشرطة الحلوى التي تحتوي على الكراميل ... أعتقد أنك تحصل على الفكرة.

Answer 1

هذا يمكن أن يفعل الخدعة:

<select id="select" multiple="multiple">
    <option value="1">test 1</option>
    <option value="2">test 2</option>
    <option value="3">test 3</option>
    <option value="4">test 4</option>
    <option value="5">test 5</option>
    <option value="6">test 6</option>
    <option value="7">test 7</option>
    <option value="8">test 8</option>
    <option value="9">test 9</option>
    <option value="10">test 10</option>
    <option value="11">test 11</option>
    <option value="12">test 12</option>
</select>

JavaScript (jQuery):

indexes = [1,3,4,5,9,12]
$(document).ready(function(){
    for(i=0; i<indexes.length; i++){
        $('#select option:eq(' + (indexes[i]-1) + ')').attr('selected', 'selected');
    }
});

بدون jquery:

window.onload = function(){
    var indexes = [1,3,4,5,9,12];
    var options = document.getElementById('select').options;
    for(i=0; i<indexes.length; i++){
        options[indexes[i]-1].selected = true;
    }
}

Answer 2

jQuery حدد البرنامج المساعد لديه selectOptions(value[, clear]) الطريقة التي تحدد قيم متعددة في مربع تحديد. لكنه يتطلب القيم كمعلمة بدلاً من الفهارس.

Answer 3

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

<select id="my-select">
  <option class="caramel">Twix</option>
  <option>Mounds</option>
  <option class="caramel">Milky Way</option>
  <!-- ... -->
</select>

وثم:

$("option.caramel", "#my-select").each(function () { this.selected = true });

تعديل:

ولكن إذا كنت تريد حقًا القيام بذلك عن طريق الفهرس ، فيمكنك القيام بذلك:

function selectOptionsByIndex(select, indexes) {
    var i = 0;
    select.children().each(function (j) { if (indexes[i] == j) { ++i; this.selected = true } });
}

selectOptionsByIndex($("#my-select"), [ 1, 3, 4, 5, 9, 12 ]);

(هذا يعتمد على قائمة الفهارس المقدمة في ترتيب تصاعدي.)