第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

添加要使用javascript進行選擇的選項

添加要使用javascript進行選擇的選項

慕虎7371278 2019-07-17 15:40:48
添加要使用javascript進行選擇的選項我希望這個javascript在一個帶有id=“mainSelect”的SELECT中創(chuàng)建12到100的選項,因為我不想手動創(chuàng)建所有的選項標記。你能給我一些指點嗎?謝謝function selectOptionCreate() {   var age = 88;   line = "";   for (var i = 0; i < 90; i++) {     line += "<option>";     line += age + i;     line += "</option>";   }   return line;}
查看完整描述

3 回答

?
千巷貓影

TA貢獻1829條經(jīng)驗 獲得超7個贊

你可以用一個簡單的for循環(huán):

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 Fiddle演示.

JS Perf我的和我的比較Sime Vidas的回答,因為我認為他的看起來比我的更容易理解/直觀,我想知道這將如何轉(zhuǎn)化為實現(xiàn)。根據(jù)Chromium14/Ubuntu11.04的說法,我的速度有點快,其他瀏覽器/平臺可能會有不同的結(jié)果。


編輯針對執(zhí)行部分的評論:

[我]如何將其應用于多個元素?

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 Fiddle演示.

最后(經(jīng)過很長時間的延遲.),一種擴展HTMLSelectElement以便將populate()函數(shù)作為方法傳遞到DOM節(jié)點:

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 Fiddle演示.

參考資料:


查看完整回答
反對 回復 2019-07-17
?
瀟湘沐

TA貢獻1816條經(jīng)驗 獲得超6個贊

我不建議在循環(huán)中執(zhí)行DOM操作-這在大型數(shù)據(jù)集中會變得非常昂貴。相反,我會這樣做:

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

您可以在MDN,但它的要點是:

它被用作文檔的輕量級版本,用于存儲由節(jié)點組成的文檔部分,就像標準文檔一樣。關鍵的區(qū)別在于,由于文檔片段不是實際DOM結(jié)構的一部分,因此對該片段所做的更改不會影響文檔,不會導致重流,也不會導致更改時可能發(fā)生的任何性能影響。


查看完整回答
反對 回復 2019-07-17
  • 3 回答
  • 0 關注
  • 520 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號