জাভাস্ক্রিপ্ট সহ নির্বাচন করার জন্য বিকল্প যুক্ত করা হচ্ছে

Question

আমি এই জাভাস্ক্রিপ্টটি আইডি = "মেইনসलेक्ट" সহ একটি নির্বাচনের 12 থেকে 100 পর্যন্ত বিকল্প তৈরি করতে চাই, কারণ আমি নিজেই সমস্ত বিকল্প ট্যাগ তৈরি করতে চাই না। আপনি আমাকে কিছু পয়েন্টার দিতে পারেন? ধন্যবাদ

function selectOptionCreate() {

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

  return line;
}

Comments

দেখতে stackoverflow.com/questions/170986/...

— smnbss

পুনরায় খোলার জন্য ভোট, যেমন লিঙ্কযুক্ত 'নকল' কেবল jQuery- ভিত্তিক উত্তর রয়েছে, যেখানে এইটির জন্য সাধারণ জাভাস্ক্রিপ্টের প্রয়োজন (বা কমপক্ষে একটি প্রয়োজন বোঝায়)।

— ডেভিড মনিকা

দুর্দান্ত উত্তর এখানে :mySelect.options[mySelect.options.length] = new Option('Text 1', 'Value1');

— ruffin

Answer 1

আপনি একটি সাধারণ 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);
}

জেএস ফিডল ডেমো ।

জেএস আমার এবং সিম বিদাসের উভয়ের জবাবের পারফেক্ট তুলনা , চালান কারণ আমি ভেবেছিলাম যে আমার চেয়ে তার চেয়ে খানিকটা বেশি বোধগম্য / স্বজ্ঞাত এবং আমি ভাবলাম যে কীভাবে এটি বাস্তবায়নে অনুবাদিত হবে। ক্রোমিয়াম 14 / উবুন্টু 11.04 অনুসারে খনিটি কিছুটা দ্রুত, অন্য ব্রাউজারগুলি / প্ল্যাটফর্মগুলিতে ভিন্ন ভিন্ন ফলাফল হওয়ার সম্ভাবনা রয়েছে।

---

ওপির মন্তব্যের জবাবে সম্পাদিত :

[আমি] কীভাবে [আমি] এটি একাধিক উপাদানকে প্রয়োগ করব?

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);

জেএস ফিডল ডেমো ।

এবং, অবশেষে (বেশ বিলম্বের পরে ...), ডিওএম নোডে একটি পদ্ধতি হিসাবে ফাংশনটিকে HTMLSelectElementশৃঙ্খলাবদ্ধ করার জন্য প্রোটোটাইপটি প্রসারিত করার populate()একটি পদ্ধতি:

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
});

জেএস ফিডল ডেমো ।

তথ্যসূত্র:

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

Comments

@ জ্যাক: সম্মত হয়েছে, এবং আমি পরবর্তী পদ্ধতিতে এই পদ্ধতিটি ব্যবহার করেছি :)

— ডেভিড বলেছেন মনিকার

এছাড়াও, হোস্ট প্রোটোটাইপগুলি বাড়ানো (প্রলোভন দেওয়ার সময়) একটি খারাপ ধারণা হিসাবে বিবেচিত হয় ।

— রবিজি

আমি মনে করি ক্রস সাইট স্ক্রিপ্টিং দুর্বলতাগুলি এড়াতে innerTextপরিবর্তে এটি ব্যবহার করার জন্য আপডেট করা উচিত innerHTML। আপনি কি মনে করেন @ ডেভিড থমাস?

— অভি বেকার্ট

Answer 2

আপনি এখানে যান:

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/

Comments

আমি কীভাবে এটি একাধিক উপাদানকে প্রয়োগ করব?

— jacktheripper

Answer 3

সবচেয়ে সংক্ষিপ্ত এবং স্বজ্ঞাত উপায় হ'ল:

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>

আপনি ব্যবহৃত ফাংশনগুলিতে অতিরিক্ত পরামিতিগুলির সাথে তালিকার শুরুতে নাম এবং মানকে আলাদা করতে বা আইটেমগুলি যুক্ত করতে পারেন:
এইচটিএমএল নির্বাচন এলিমেন্ট .এডডি (আইটেম [, এর আগে]);
নতুন বিকল্প (পাঠ্য, মান, ডিফল্টনির্বাচিত, নির্বাচিত);

Answer 4

আমি কোনও লুপের ভিতরে ডোম ম্যানিপুলেশনগুলি করার পরামর্শ দিই না - এটি বড় ডেটাসেটে ব্যয়বহুল হতে পারে। পরিবর্তে, আমি এই জাতীয় কিছু করব:

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);
}

আপনি এমডিএন তে ডকুমেন্টফ্রেগমেন্ট সম্পর্কে আরও পড়তে পারেন , তবে এটির সংক্ষিপ্তসারটি এখানে:

স্ট্যান্ডার্ড ডকুমেন্টের মতো নোড সমন্বিত একটি নথি কাঠামোর একটি অংশ সংরক্ষণ করার জন্য এটি ডকুমেন্টের হালকা ওজনের সংস্করণ হিসাবে ব্যবহৃত হয়। মূল পার্থক্যটি হ'ল ডকুমেন্ট খণ্ডটি প্রকৃত DOM এর কাঠামোর অংশ নয়, খণ্ডে করা পরিবর্তনগুলি ডকুমেন্টকে প্রভাবিত করে না, পুনর্বিবেচনার কারণ ঘটায় না বা পরিবর্তনগুলি যখন ঘটতে পারে তখন কোনও কার্যকারিতা প্রভাব ফেলতে পারে।

Answer 5

পৃষ্ঠার পুনরাবৃত্তি পুনরায় রেন্ডারিং এড়ানোর জন্য একটি জিনিস যা আমি এড়াতে পারি তা লুপে ডোম ক্রিয়াকলাপ।

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');

সম্পাদনা: আপনি কীভাবে এইচটিএমএলকে অন্য কোনও নির্বাচিত উপাদানকে সজ্জিত করতে পারেন তা দেখানোর জন্য ফাংশনটি সরিয়ে ফেলেছে - এভাবে ফাংশন কলটি পুনরাবৃত্তি করে অপ্রয়োজনীয় লুপিং এড়ানো।

Comments

আমি কীভাবে এটি একাধিক উপাদানকে প্রয়োগ করব?

— jacktheripper

নিশ্চিত না যে আমি অনুসরণ করি - আপনি একাধিক নির্বাচন উপাদানকে একই বিকল্পগুলি যুক্ত করতে চান?

— কিনকুটা

হ্যাঁ, আমি একই বিকল্পগুলির সাথে বাক্সগুলি করতে চাই

— জ্যাকথারিপার

আমি এটিকে এমন একটি ফাংশন হিসাবে চিহ্নিত করেছি যেখানে আপনি কল করতে পারেন যেখানে আপনি সুনির্দিষ্ট উপাদানগুলির আইডিতে পাস করতে চান যেখানে আপনি বিকল্পগুলি যুক্ত করতে চান।

— কিনাকুটা

ডকুমেন্টফ্রেগমেন্টের জন্য এটি তৈরি করা হয়। আপনি সহজেই গৃহীত উত্তরটি সংশোধন করতে পারেন যাতে একাধিক রেন্ডারিং প্রতিরোধ করে প্রথমে ডকুমেন্টফ্রেমেটে অপশন যুক্ত করা যায়।

— স্যাম ব্রাস্লাভস্কি

Answer 6

দেখুন: jQuery এর সাথে কোন অ্যারে থেকে কোনও বিকল্পে বিকল্প যুক্ত করার সর্বোত্তম উপায় কী?

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

Answer 7

আপনি যখন একটি নতুন Optionঅবজেক্ট তৈরি করেন , সেখানে দুটি পরামিতি পাস করতে হবে: প্রথমটি হল পাঠ্যের তালিকায় আপনি উপস্থিত হতে চান এবং দ্বিতীয়টি বিকল্পটিতে নির্ধারিত মান।

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

তারপরে আপনি কেবল Optionখালি অ্যারে উপাদানটিকে এই বস্তুটি বরাদ্দ করুন , উদাহরণস্বরূপ:

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

Answer 8

উপরের সমাধানগুলির কোনওটিই আমার পক্ষে কার্যকর হয়নি। আমি চেষ্টা করার পরে সংযোজন পদ্ধতি ত্রুটি দেয় নি তবে এটি আমার সমস্যার সমাধান করে নি। শেষ পর্যন্ত আমি সিলেক্ট 2 এর ডেটা সম্পত্তি সহ আমার সমস্যাটি সমাধান করেছি। আমি জসন ব্যবহার করেছি এবং অ্যারে পেয়েছি এবং তারপরে এটিকে সিলেক্ট 2 এলিমেন্টের আরম্ভ করতে দেব। আরও বিশদ জন্য আপনি আমার উত্তর নীচের পোস্টে দেখতে পারেন।

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

Answer 9

প্রায়শই আপনার সম্পর্কিত রেকর্ডগুলির একটি অ্যারে থাকে, আমি 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('');