التحديد التلقائي لـ <option> بناءً على حقل الإدخال، مع بعض التحذيرات

Question

لدي عنصر SELECT حيث أحتاج إلى تحديد الخيار المناسب تلقائيًا بناءً على النصف الأول من الرمز البريدي الذي تم إدخاله في حقل النص.الرموز البريدية البريطانية هي من النموذج AB12 3CD, حيث يتكون القسم الأول من حرف أو حرفين يمثلان المقاطعة ورقم يمثل المنطقة داخل المقاطعة.الأحرف الثلاثة الأخيرة ليست ذات صلة بهذا السؤال.

بالنسبة لمعظم الحقول، يعتمد ذلك على الحرف (الحروف) الأولى فقط، ولكن بالنسبة لبعض الخيارات فهو نطاق الرمز البريدي.يجب أن يشرح HTML ذلك بشكل أفضل:

<select id="country_field">
  <option value="">Select</option>
  <option value="AB">AB (Aberdeen)</option>
  <option value="AL">AL (St. Albans)</option>
  <option value="B">B (Birmingham)</option>
  <option value="BA">BA (Bath)</option>
  ...
  <option value="DD1">DD 1-7 (Dundee)</option>
  <option value="DD8">DD 8-11 (Dundee)</option>
  ...
</select>

سيحدد الكود أدناه العنصر الصحيح حاليًا عندما تكون القيمة حرفين بالضبط.لكنني بحاجة إلى توسيعه ليشمل الرموز المكونة من حرف واحد (برمنغهام) ونطاقات الرمز البريدي (دندي).ملحوظة:يمكنني تغيير قيم الخيارات إذا كان هناك حل يضمن قيمًا خاصة، على سبيل المثال.DD1/DD2 بدلاً من DD1/DD8.

باختصار:

• ب2 --> برمنغهام
• BA3 --> باث
• DD5 --> أول دندي [DD1]
• DD11 --> دندي الثاني [DD8]

إليكم جافا سكريبت الذي أستخدمه حتى الآن ...

window.onload = function()
{
  // postcode INPUT field
  var zipInput = document.getElementById( 'zip_field' );
  // county SELECT field
  var ctySelect = document.getElementById( 'county_field' );

  zipInput.onchange = function()
  {
    var zipValue = zipInput.value;
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.substring(0,2) == ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }
}

Answer 1

يمكنك استخدام تعبير عادي لسحب القيم...

/^([a-z]{1,2})(\d*)\s/i

بعد ذلك، بالنسبة إلى رمز بنطاق مثل DD، ربما شيء من هذا القبيل (رمز زائف)...

if(match[1].value == "DD") {   // needs special processing
  range = match[2].value;
  range = range < 8 ? 1 : 8;   // if the number is less than 8, set it to 1, otherwise set it to 8
  listValue = match[1].value + range
} else                         // just use the letters to select the list item 
  listValue = match[1].value;

وذلك ل DD5, ، سيعود هذا DD1 ولل DD11 سوف يعود DD8.شيء مثل B2 أو BA3 سوف يعود ببساطة B و BA, ، على التوالى.

يمكنك تغيير if إلى أ switch إذا كان لديك رموز أخرى متعددة بنطاقات مختلفة.بعد ذلك، ما عليك سوى تعيين عنصر القائمة بهذه القيمة باعتباره التحديد الحالي.

Answer 2

يستبدل:

zipInput.onchange = function()
  {
    var zipValue = zipInput.value;
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.substring(0,2) == ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }

مع:

zipInput.onchange = function()
  {
    var zipValue = zipInput.value.match(/^[a-z]+/gi);

    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if (zipValue[0] === ctyOptions[i].value )
        ctyOptions[i].selected = true;
    }
  }

1. أولاً، قمنا بإزالة إجراء تعيين المتغير من الحلقة.لماذا دورات النفايات تكرر نفس العملية؟
2. رقم اثنين، نقوم الآن بتصفية كل شيء باستثناء الحروف الموجودة في بداية الإدخال.
3. ويمكن توسيع هذا بدوره ليشمل لاحقات الأرقام، وما إلى ذلك.

Answer 3

يمكنك مقارنة بداية zipValue بقيم الخيارات.لا حاجة للتعبيرات العادية.فقط استخدم مؤشر.

  zipInput.onchange = function()
  {
    var zipValue = zipInput.value.toUpperCase();
    var ctyOptions = ctySelect.options;
    for ( i = 0; i < ctyOptions.length; i++ )
    {
      if ( zipValue.indexOf(ctyOptions[i].value) == 0 )
        ctyOptions[i].selected = true;
    }
  }

Answer 4

لست متأكدًا من كيفية عمل ذلك في جافا سكريبت ولكني سأفعل شيئًا مثل ما يلي:

• قم بإعداد قيمك لتكون تعبيرات عادية لتتوافق مع ما تبحث عنه

إذن، "B"، يصبح "^B[0-9]" (أفترض أنه يجب أن يتبعه رقم)

تصبح مكتبة الإسكندرية "^BA[0-9]"

يصبح DD1 "^DD([1-7] )"

يصبح DD8 "^DD([8-9] |[1][01] )" لمطابقة DD8، DD9، DD10، DD11

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