การเพิ่มตัวเลือกเพื่อเลือกด้วย javascript

ฉันต้องการจาวาสคริปต์นี้เพื่อสร้างตัวเลือกจาก 12 ถึง 100 ในตัวเลือกที่มี id = "mainSelect" เพราะฉันไม่ต้องการสร้างแท็กตัวเลือกทั้งหมดด้วยตนเอง คุณช่วยชี้ให้ฉันได้ไหม ขอบคุณ

function selectOptionCreate() {

  var age = 88;
  line = "";
  for (var i = 0; i < 90; i++) {
    line += "<option>";
    line += age + i;
    line += "</option>";
  }

  return line;
}

คุณสามารถทำได้ด้วยการforวนซ้ำง่ายๆ:

var min = 12,
    max = 100,
    select = document.getElementById('selectElementId');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

สาธิต JS ซอ

JSการเปรียบเทียบที่สมบูรณ์ของคำตอบทั้งของฉันและของSime Vidasทำงานเพราะฉันคิดว่าเขาดูเข้าใจง่าย / เข้าใจง่ายกว่าของฉันเล็กน้อยและฉันสงสัยว่ามันจะแปลไปสู่การนำไปใช้อย่างไร ตาม Chromium 14 / Ubuntu 11.04 ของฉันค่อนข้างเร็วเบราว์เซอร์ / แพลตฟอร์มอื่น ๆ น่าจะมีผลลัพธ์ที่แตกต่างกัน

แก้ไขเพื่อตอบความคิดเห็นจาก OP:

[อย่างไร] [I] ใช้สิ่งนี้กับองค์ประกอบมากกว่าหนึ่งรายการอย่างไร

function populateSelect(target, min, max){
    if (!target){
        return false;
    }
    else {
        var min = min || 0,
            max = max || min + 100;

        select = document.getElementById(target);

        for (var i = min; i<=max; i++){
            var opt = document.createElement('option');
            opt.value = i;
            opt.innerHTML = i;
            select.appendChild(opt);
        }
    }
}
// calling the function with all three values:
populateSelect('selectElementId',12,100);

// calling the function with only the 'id' ('min' and 'max' are set to defaults):
populateSelect('anotherSelect');

// calling the function with the 'id' and the 'min' (the 'max' is set to default):
populateSelect('moreSelects', 50);

สาธิต JS ซอ

และในที่สุด (หลังจากค่อนข้างล่าช้า ... ) วิธีการขยายต้นแบบของHTMLSelectElementเพื่อเชื่อมโยงpopulate()ฟังก์ชันเป็นวิธีไปยังโหนด DOM:

HTMLSelectElement.prototype.populate = function (opts) {
    var settings = {};

    settings.min = 0;
    settings.max = settings.min + 100;

    for (var userOpt in opts) {
        if (opts.hasOwnProperty(userOpt)) {
            settings[userOpt] = opts[userOpt];
        }
    }

    for (var i = settings.min; i <= settings.max; i++) {
        this.appendChild(new Option(i, i));
    }
};

document.getElementById('selectElementId').populate({
    'min': 12,
    'max': 40
});

สาธิต JS ซอ

อ้างอิง:

• node.appendChild().
• document.getElementById().
• element.innerHTML.

ไปเลย:

for ( i = 12; i <= 100; i += 1 ) {
    option = document.createElement( 'option' );
    option.value = option.text = i;
    select.add( option );
}

การสาธิตสด: http://jsfiddle.net/mwPb5/

อัปเดต:เนื่องจากคุณต้องการนำรหัสนี้กลับมาใช้ใหม่นี่เป็นหน้าที่ของมัน:

function initDropdownList( id, min, max ) {
    var select, i, option;

    select = document.getElementById( id );
    for ( i = min; i <= max; i += 1 ) {
        option = document.createElement( 'option' );
        option.value = option.text = i;
        select.add( option );
    }
}

การใช้งาน:

initDropdownList( 'mainSelect', 12, 100 );

การสาธิตสด: http://jsfiddle.net/mwPb5/1/

วิธีที่กระชับและหยั่งรู้ที่สุดคือ:

var selectElement = document.getElementById('ageselect');

for (var age = 12; age <= 100; age++) {
  selectElement.add(new Option(age));
}

Your age: <select id="ageselect"><option value="">Please select</option></select>

คุณยังสามารถแยกความแตกต่างของชื่อและค่าหรือเพิ่มรายการที่จุดเริ่มต้นของรายการด้วยพารามิเตอร์เพิ่มเติมในฟังก์ชั่นที่ใช้:
องค์ประกอบ HTMLSelect .add (รายการ [, ก่อน]);
ตัวเลือกใหม่ (ข้อความค่าเริ่มต้นเลือกแล้วเลือก);

ฉันไม่แนะนำให้ทำกิจวัตร DOM ภายในลูป - ซึ่งอาจมีราคาแพงในชุดข้อมูลขนาดใหญ่ ฉันจะทำสิ่งนี้แทน:

var elMainSelect = document.getElementById('mainSelect');

function selectOptionsCreate() {
  var frag = document.createDocumentFragment(),
    elOption;
  for (var i=12; i<101; ++i) {
    elOption = frag.appendChild(document.createElement('option'));
    elOption.text = i;
  }
  elMainSelect.appendChild(frag);
}

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ DocumentFragment บนMDNแต่นี่คือส่วนสำคัญของมัน:

มันถูกใช้เป็นรุ่นน้ำหนักเบาของเอกสารเพื่อจัดเก็บส่วนของโครงสร้างเอกสารที่ประกอบด้วยโหนดเช่นเดียวกับเอกสารมาตรฐาน ความแตกต่างที่สำคัญคือเนื่องจากส่วนของเอกสารไม่ได้เป็นส่วนหนึ่งของโครงสร้างของ DOM ที่แท้จริงการเปลี่ยนแปลงที่ทำกับแฟรกเมนต์จะไม่ส่งผลกระทบต่อเอกสารทำให้เกิดการ reflow หรือมีผลกระทบต่อประสิทธิภาพที่อาจเกิดขึ้นเมื่อทำการเปลี่ยนแปลง

สิ่งหนึ่งที่ฉันหลีกเลี่ยงได้คือการทำงานของ DOM ในลูปเพื่อหลีกเลี่ยงการแสดงซ้ำหน้าซ้ำอีกครั้ง

var firstSelect = document.getElementById('first select elements id'),
    secondSelect = document.getElementById('second select elements id'),
    optionsHTML = [],
    i = 12;

for (; i < 100; i += 1) {
  optionsHTML.push("<option value=\"Age" + i + "\">Age" + i + "</option>";
}

firstSelect.innerHTML = optionsHTML.join('\n');
secondSelect.innerHTML = optionsHTML.join('\n');

แก้ไข: ลบฟังก์ชั่นออกเพื่อแสดงว่าคุณสามารถกำหนด html ที่คุณสร้างขึ้นให้กับองค์ประกอบที่เลือกอื่นได้อย่างไร - เพื่อหลีกเลี่ยงการวนซ้ำที่ไม่จำเป็นโดยการเรียกฟังก์ชันซ้ำ

ดู: วิธีที่ดีที่สุดในการเพิ่มตัวเลือกในการเลือกจากอาร์เรย์ด้วย jQuery คืออะไร?

$('#mySelect')
      .append($('<option>', { value : key })
      .text(value)); 

เมื่อคุณสร้างOptionวัตถุใหม่มีสองพารามิเตอร์ที่จะผ่าน: ประการแรกคือข้อความที่คุณต้องการให้ปรากฏในรายการและค่าที่สองที่จะกำหนดให้กับตัวเลือก

var myNewOption = new Option("TheText", "TheValue");

จากนั้นคุณเพียงกำหนดOptionวัตถุนี้ให้กับองค์ประกอบอาร์เรย์ที่ว่างเปล่าตัวอย่างเช่น:

document.theForm.theSelectObject.options[0] = myNewOption;

วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน วิธีการผนวกไม่ได้ให้ข้อผิดพลาดเมื่อฉันพยายาม แต่ก็ไม่ได้แก้ปัญหาของฉัน ในที่สุดฉันก็แก้ปัญหาด้วย data data ของ select2 ฉันใช้ json และได้รับอาร์เรย์แล้วให้มันในองค์ประกอบ select2 เริ่มต้น สำหรับรายละเอียดเพิ่มเติมคุณสามารถดูคำตอบของฉันได้ที่โพสต์ด้านล่าง

https://stackoverflow.com/a/41297283/4928277

บ่อยครั้งที่คุณมีเร็กคอร์ดที่เกี่ยวข้องฉันพบว่าการกรอกข้อมูลselectด้วยวิธีนี้ง่ายและเป็นธรรม:

selectEl.innerHTML = array.map(c => '<option value="'+c.id+'">'+c.name+'</option>').join('');

สิ่งนี้จะแทนที่ตัวเลือกที่มีอยู่
คุณสามารถใช้selectEl.insertAdjacentHTML('afterbegin', str);เพื่อเพิ่มพวกเขาไปด้านบนแทน
และselectEl.insertAdjacentHTML('beforeend', str);ต้องการเพิ่มลงไปด้านล่างของรายการ

ไวยากรณ์ที่รองรับ IE11:

array.map(function (c) { return '<option value="'+c.id+'">'+c.name+'</option>'; }).join('');