كيفية جعل الخيار الأول من <select> مختارة مع مسج

StackOverflow https://stackoverflow.com/questions/1414276

  •  06-07-2019
  •  | 
  •  

سؤال

كيف يمكنني جعل الخيار الأول مختارة مع jQuery ؟

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>
هل كانت مفيدة؟

المحلول

$("#target").val($("#target option:first").val());

نصائح أخرى

ويمكنك أن تجرب هذا

$("#target").prop("selectedIndex", 0);
// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

عند استخدام

$("#target").val($("#target option:first").val());

وهذا لن يعمل في كروم وسفاري إذا كانت قيمة الخيار الأول هو فارغة.

وأنا أفضل

$("#target option:first").attr('selected','selected');

ولأنها يمكن أن تعمل في جميع المتصفحات.

وتغيير قيمة المدخلات تحديد أو تعديل السمة المحددة يمكن الكتابة الممتلكات selectedOptions الافتراضي للعنصر DOM، مما أدى إلى العنصر الذي قد لا إعادة تعيين بشكل صحيح في الشكل الذي تمت زيارتها الحدث إعادة تعيين يسمى.

استخدم أسلوب دعامة مسج لمسح وتحديد الخيار المطلوبة:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");
$("#target")[0].selectedIndex = 0;

ونقطة واحدة خفية I <م> التفكير لقد اكتشفت عن أعلى صوت الإجابات هو أنه على الرغم من أنها بشكل صحيح تغيير القيمة المحددة، فإنها لا تقم بتحديث العنصر الذي يراه المستخدم (فقط عند النقر القطعة سوف يرون شيك بجانب عنصر محدثة).

وتسلسل مكالمة .change () إلى نهاية وأيضا تحديث القطعة UI كذلك.

$("#target").val($("#target option:first").val()).change();

و(لاحظ أن لاحظت هذا أثناء استخدام مسج موبايل ومربع على سطح المكتب كروم، وحتى هذا قد لا يكون هذا هو الحال في كل مكان).

إذا كان لديك خيارات المعوقين، يمكنك إضافة على لا ([المعوقين]) لمنع اختيار منها مما يؤدي إلى ما يلي:

$("#target option:not([disabled]):first").attr('selected','selected')

وهناك طريقة أخرى لإعادة القيم (على عناصر متعددة محددة) يمكن أن يكون هذا:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});
$('#newType option:first').prop('selected', true);

وبسيط مثل ما يلي:

$('#target option:first').prop('selected', true);

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

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

وهنا هو كيف تفعل ذلك:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

وعلى الرغم من أن كل وظيفة ربما ليس من الضروري ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

ويعمل بالنسبة لي.

وعملت فقط بالنسبة لي باستخدام الزناد ( 'التغيير') في نهاية المطاف، مثل هذا:

$("#target option:first").attr('selected','selected').trigger('change');

إذا كنت تنوي استخدام الخيار الأول كقيمة افتراضية مثل

<select>
    <option value="">Please select an option below</option>
    ...

وبعد ذلك يمكنك استخدام فقط:

$('select').val('');

وهذا هو لطيف وبسيط.

في الجزء الخلفي من الرد جيمس بيكر لي، أنا أفضل هذا الحل كما أنه يزيل الاعتماد على دعم المتصفح ل: أولا: اختيار ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

وبالنسبة لي انها عملت فقط عندما أضفت التعليمات البرمجية التالية:

و.change();

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

و$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

استخدم:

$("#selectbox option:first").val()

وتجدون بسيطة تعمل في هذا JSFiddle .

$("#target").val(null);

وعملت غرامة في الكروم

إذا كنت تخزين الكائن مسج العنصر حدد:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

وتحقق هذا النهج أفضل باستخدام مسج مع ECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

وبالنسبة لي، لأنها عملت فقط عندما أضفت السطر التالي من التعليمات البرمجية

$('#target').val($('#target').find("option:first").val());

ويمكنك اختيار أي خيار من dropdown عن طريق استخدامه.

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

محل معرف مع إيلاء حدد معرف العلامة ، مؤشر خاصة العناصر التي تريد تحديدها.

أي

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

حتى هنا لأول عنصر الاختيار وسوف تستخدم البرمجية التالية :

$('select#ddlState').val($('#ddlState option')[0].value)

وهذا عمل بالنسبة لي!

$("#target").prop("selectedIndex", 0);

استخدم:

alert($( "#target option:first" ).text());
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top