it-swarm.dev

كيفية إضافة خيارات بشكل حيوي إلى تحديد موجود في javascript Vanilla

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

daySelect = document.getElementById('daySelect');
daySelect.innerHTML += "<option'>Hello world</option'>";
alert(daySelect.innerHTML)

بعد أن فعلت هذا ، لم يكن هناك تغيير في الاختيار وأعطاني التنبيه

HELLO WORLD</option'>

أعتذر إذا كان هذا بسيطًا ، لكنني جديد جدًا في جافا سكريبت وبرمجة الويب بشكل عام. شكرا لأية مساعدة.

تحرير: لذلك حاولت الاقتراحات المقدمة مثل ذلك.

daySelect = document.getElementById('daySelect');
myOption = document.createElement("option");
myOption.text = "Hello World";
myOption.value = "Hello World";
daySelect.appendChild(myOption);

هذا لم يغير التحديد في الصفحة على الإطلاق. أي فكرة لماذا؟ وفحصت أن الكود كان قيد التنبيه.

تحرير: لقد نجحت الفكرة ، اتضح أنها لم تعرض قيمة في القائمة المنسدلة. أنا لا أعرف لماذا ولكن يمكنني معرفة ذلك على ما أعتقد.

42
avorum

يوضح هذا البرنامج التعليمي بالضبط ما عليك القيام به: إضافة خيارات إلى مربع اختيار HTML مع javascript

في الأساس:

 daySelect = document.getElementById('daySelect');
 daySelect.options[daySelect.options.length] = new Option('Text 1', 'Value1');
76
Drew

أعتقد أن شيئا مثل هذا سوف يقوم بالمهمة.

var option = document.createElement("option");
option.text = "Text";
option.value = "myvalue";
var select = document.getElementById("daySelect");
select.appendChild(option);
17
intuitivepixel

استخدم وظيفة document.createElement ثم قم بإضافتها كطفل من اختيارك.

var newOption = document.createElement("option");
newOption.text = 'the options text';
newOption.value = 'some value if you want it';
daySelect.appendChild(newOption);
5
Lochemage

.add () يعمل أيضًا.

var daySelect = document.getElementById("myDaySelect");
var myOption = document.createElement("option");
myOption.text = "test";
myOption.value = "value";
daySelect.add(option);

مدرسة W3 - جرب

0
Esteban Lezama

أبسط طريقة هي:

selectElement.add(new Option('Text', 'value'));

نعم بهذه البساطة. ويعمل حتى في IE8. وله معلمات اختيارية أخرى.

راجع المستندات:
HTMLSelect Element .add (item [، before])؛
خيار جديد (النص ، القيمة ، القيمة الافتراضية ، محددة) ؛

0
user

جرب هذا؛

   var data = "";
   data = "<option value = Some value> Some Option </option>";         
   options = [];
   options.Push(data);
   select = document.getElementById("drop_down_id");
   select.innerHTML = optionsHTML.join('\n'); 
0
user28864