كيف يمكنك إزالة جميع خيارات مربع التحديد ثم إضافة خيار واحد وتحديده باستخدام jQuery؟

Question

باستخدام jQuery الأساسي، كيف يمكنك إزالة جميع خيارات مربع التحديد، ثم إضافة خيار واحد وتحديده؟

مربع الاختيار الخاص بي هو التالي.

<Select id="mySelect" size="9" </Select>

يحرر:التعليمة البرمجية التالية كانت مفيدة مع التسلسل.ومع ذلك، (في Internet Explorer) .val('whatever') لم يحدد الخيار الذي تمت إضافته.(لقد استخدمت نفس "القيمة" في كليهما .append و .val.)

$('#mySelect').find('option').remove().end().append('<option value="whatever">text</option>').val('whatever');

يحرر:في محاولة لجعله يحاكي هذا الرمز، أستخدم الكود التالي عندما تتم إعادة تعيين الصفحة/النموذج.يتم ملء مربع التحديد هذا بمجموعة من أزرار الاختيار. .focus() كان أقرب، لكن الخيار لم يظهر محددًا كما هو الحال مع .selected= "true".لا يوجد خطأ في الكود الموجود لدي - أنا فقط أحاول تعلم jQuery.

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

يحرر:كانت الإجابة المختارة قريبة مما احتاجه.لقد نجح هذا بالنسبة لي:

$('#mySelect').children().remove().end().append('<option selected value="whatever">text</option>') ;

لكن كلتا الإجابتين قادتني إلى الحل النهائي ..

Answer 1

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Answer 2

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

Answer 3

لماذا لا تستخدم فقط جافا سكريبت العادي؟

document.getElementById("selectID").options.length = 0;

Answer 4

كان لدي خطأ في IE7 (يعمل بشكل جيد في IE6) حيث يؤدي استخدام أساليب jQuery المذكورة أعلاه إلى مسح يختار في DOM ولكن ليس على الشاشة.باستخدام شريط أدوات IE Developer يمكنني أن أؤكد أن ملف يختار تم تطهيرها وتحتوي على العناصر الجديدة، ولكن بصريًا يختار لا تزال تظهر العناصر القديمة - على الرغم من عدم تمكنك من تحديدها.

كان الإصلاح هو استخدام أساليب/خصائص DOM القياسية (كما كان الحال في الملصق الأصلي) للمسح بدلاً من jQuery - مع الاستمرار في استخدام jQuery لإضافة خيارات.

$('#mySelect')[0].options.length = 0;

Answer 5

إذا كان هدفك هو إزالة جميع الخيارات من التحديد باستثناء الخيار الأول (عادةً خيار "الرجاء اختيار عنصر")، فيمكنك استخدام:

$('#mySelect').find('option:not(:first)').remove();

Answer 6

لست متأكدًا تمامًا مما تقصده بـ "أضف واحدًا وحدده"، لأنه سيتم تحديده افتراضيًا على أي حال.ولكن إذا أضفت أكثر من واحد، فسيكون الأمر أكثر منطقية.ماذا عن شيء مثل:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

الرد على "تحرير":هل يمكنك توضيح ما تقصده بـ "مربع التحديد هذا مملوء بمجموعة من أزرار الاختيار"؟أ <select> لا يمكن (قانونيًا) احتواء العنصر <input type="radio"> عناصر.

Answer 7

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

Answer 8

$("#control").html("<option selected=\"selected\">The Option...</option>");

Answer 9

بفضل الإجابات التي تلقيتها، تمكنت من إنشاء شيء مثل ما يلي، والذي يناسب احتياجاتي.سؤالي كان غامضا إلى حد ما.شكرا للمتابعة.تم حل مشكلتي الأخيرة من خلال تضمين كلمة "محدد" في الخيار الذي أردت تحديده.

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

Answer 10

1. قم أولاً بمسح جميع الخيارات الموجودة باستثناء الخيار الأول(--Select--)

2. إلحاق قيم خيارات جديدة باستخدام الحلقة واحدة تلو الأخرى

   $('#ddlCustomer').find('option:not(:first)').remove();
   for (var i = 0; i < oResult.length; i++) {
      $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
   }
   

Answer 11

ماذا عن مجرد تغيير HTML إلى بيانات جديدة.

$('#mySelect').html('<option value="whatever">text</option>');

مثال آخر:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

Answer 12

طريق اخر:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

وتحت هذا الرابط، هناك ممارسات جيدة https://api.jquery.com/select/

Answer 13

لقد وجدت على شبكة الإنترنت شيئا مثل أدناه.مع الآلاف من الخيارات كما هو الحال في وضعي، يكون هذا أسرع بكثير من .empty() أو .find().remove() من مسج.

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

مزيد من المعلومات هنا.

Answer 14

بناءً على إجابة موريتو، يكون هذا أسهل قليلاً في القراءة والفهم:

$('#mySelect').find('option').not(':first').remove();

لإزالة كافة الخيارات باستثناء واحد بقيمة محددة، يمكنك استخدام هذا:

$('#mySelect').find('option').not('[value=123]').remove();

سيكون هذا أفضل إذا كان الخيار المراد إضافته موجودًا بالفعل.

Answer 15

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

سيقوم السطر الأول من التعليمات البرمجية بإزالة كافة الخيارات الموجودة في مربع التحديد حيث لم يتم ذكر أي معايير للعثور على الخيار.

سيضيف السطر الثاني من التعليمات البرمجية الخيار بالقيمة المحددة ("testValue") والنص ("TestText").

Answer 16

يستخدم مسج دعم() لمسح الخيار المحدد

$('#mySelect option:selected').prop('selected', false);

Answer 17

سيؤدي هذا إلى استبدال mySelect الحالي بـ mySelect الجديد.

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

Answer 18

يمكنك القيام بذلك ببساطة عن طريق استبدال html

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

Answer 19

نأمل أن تنجح

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

Answer 20

• حفظ قيم الخيار المراد إلحاقها بكائن ما
• امسح الخيارات الموجودة في علامة التحديد
• قم بتكرار كائن القائمة وإلحاق المحتويات بعلامة التحديد المقصودة

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 21

رأيت هذا الرمز في Select2https://select2.org/programmatic-control/add-select-clear-items#clearing-selections

$('#mySelect).val(null).trigger('change');

Answer 22

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');