هل تريد الاحتفاظ بأزواج القيمة الأساسية معًا في HTML <select/> باستخدام jQuery؟

Question

نظرًا لتحديد خيارات متعددة في jQuery.

$select = $("<select></select>");
$select.append("<option>Jason</option>") //Key = 1
       .append("<option>John</option>") //Key = 32
       .append("<option>Paul</option>") //Key = 423

كيف ينبغي تخزين المفتاح واسترجاعه؟

قد يكون المعرف مكانًا جيدًا ولكن لن يكون مضمونًا فريدًا إذا كان لدي قيم مشاركة متعددة التحديد (وسيناريوهات أخرى).

شكرًا

وبروح TMTOWTDI.

$option = $("<option></option>");
$select = $("<select></select>");
$select.addOption = function(value,text){
    $(this).append($("<option/>").val(value).text(text));
};

$select.append($option.val(1).text("Jason").clone())
       .append("<option value=32>John</option>")
       .append($("<option/>").val(423).text("Paul"))
       .addOption("321","Lenny");

Answer 1

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

$select = $('<select id="mySelect"></select>');
$select.append('<option value="1">Jason</option>') //Key = 1
   .append('<option value="32">John</option>') //Key = 32
   .append('<option value="423">Paul</option>') //Key = 423

يتيح لك jQuery الحصول على القيمة باستخدام طريقة val().باستخدامه على علامة التحديد تحصل على قيمة الخيار المحدد الحالي.

$( '#mySelect' ).val(); //Gets the value for the current selected option

$( '#mySelect > option' ).each( function( index, option ) {
    option.val(); //The value for each individual option
} );

تحسبًا لذلك، يقوم التابع .each بتكرار كل عنصر يطابقه الاستعلام.

Answer 2

HTML <option> تحتوي العلامة على سمة تسمى "القيمة"، حيث يمكنك تخزين المفتاح الخاص بك.

على سبيل المثال:

<option value=1>Jason</option>

لا أعرف كيف سيعمل هذا مع jQuery (أنا لا أستخدمه)، ولكن آمل أن يكون هذا مفيدًا رغم ذلك.

Answer 3

إذا كنت تستخدم HTML5، فيمكنك استخدام ملف سمة البيانات المخصصة.انها تبدو مثل هذا:

$select = $("<select></select>");
$select.append("<option data-key=\"1\">Jason</option>") //Key = 1
   .append("<option data-key=\"32\">John</option>") //Key = 32
   .append("<option data-key=\"423\">Paul</option>") //Key = 423

ثم للحصول على المفتاح المحدد يمكنك القيام بما يلي:

var key = $('select option:selected').attr('data-key');

أو إذا كنت تستخدم XHTML، فيمكنك إنشاء مساحة اسم مخصصة.

نظرًا لأنك تقول أن المفاتيح يمكن أن تتكرر، فمن المحتمل ألا يكون استخدام سمة القيمة خيارًا، حيث لن تتمكن بعد ذلك من معرفة أي من الخيارات المختلفة بنفس القيمة تم تحديده في منشور النموذج.