如何製作選定的元素並追加選項？

Question

我想使選擇器組件與一些選項。我沒有得到任何結果。我正在做這件事的方式有點不對勁。

任何人都可以幫助我嗎？

var object = { 
       "id":"countries", 
       "label":"Country", 
       "name":"countries", 
       "type":"select", 
       "options":[ 
        { 
        "value":"", 
        "text":"Select Country" 
        }, 
        { 
        "value":"in", 
        "text":"India", 
         "selected":"true" 
        }, 
        { 
        "value":"us", 
        "text":"United Stated" 

        }, 
        { 
        "value":"uk", 
        "text":"United Kingdom" 
        }, 
        { 
        "value":"cn", 
        "text":"Canada" 
        } 
       ] 
}; 
var select = ""; 

var mapInfo = function (element,info) { 
    $.map(info, function(val,num){ 
console.log(val);   
    }) 
} 

var generateSelector = function (info){ 

    select +='<select'+info.id+'></select>' 
    select +=mapInfo(select,info.options) 

    $('body').append(select); 

}(object); 

jsfiddle here

Answer 1

試試這個：

var $select = $("<select id='"+obj.id+"' name='"+obj.name+"'/>"); 
var selected = ''; 
var generateSelector = function (info){ 
    $.each(obj.options, function(i, ob){ 
     if (ob.hasOwnProperty('selected')) { 
      selected = ob.value; 
     } 
     $select.append('<option value='+ob.value+'>'+ ob.text+'</option>') 
    }) 

    $('body').append($select); 
    $('select').val(selected) 
} 

Demo

Answer 2

編寫HTML用JavaScript會導致混亂。在這種情況下，您將id與select標籤連接起來。使用DOM來代替：

var select = document.createElement("select"), i, opt; //create a select element 
select.id = info.id; //set the id 
for(i = 0; i<info.options.length; i++) { 
    opt = new Option(); //create a new option and set its properties 
    opt.text = info.options[i].text; 
    opt.value = info.options[i].value; 
    opt.selected = info.options[i].selected; 
    select.appendChild(opt); //add the option to the select element 
} 

jsFiddle

Answer 3

試試這個

function generateSelector(obj) { 
var selector = $('<div></div>'); 
var label = $('<label for="' + obj.id + '">' + obj.label + '</label>'); 
var selectElem = $('<select id="' + obj.id + '" name="' + obj.name + '"></select>'); 
for (var i = 0; i < obj.options.length; i++) { 
    var option = $('<option value="' + obj.options[i].value + '">' + obj.options[i].text + '</option>'); 
    if (obj.options[i].selected) 
     option.attr('selected', 'selected'); 
    option.appendTo(selectElem); 
} 
label.appendTo(selector); 
selectElem.appendTo(selector); 

return selector; 

}

Answer 4

這裏是我的版本的發電機。 :)

$(object).each(function(i,v) { 
    var label = $("<label />", { html: v.label, 'for': v.name }); 
    var element; 
    switch(v.type) { 
     case "select": 
      element = $("<select />", { id: v.id, name: v.name }); 
      $(v.options).each(function(x,y) { 
       var option = $("<option />", { value : y.value, html : y.text }); 
       element.append(option) 
      }); 
     break; 
    } 
    $("body").append(label, element);   
}); 

[See it in action]

• 這可以處理多組數據
• 作爲可擴展性，它可以擴展到覆蓋不僅僅是選擇類型的更多。

Answer 5

$(document).ready(function() { 
     var jsonObject = { 
      "id": "countries", 
      "label": "Country", 
      "name": "countries", 
      "type": "select", 
      "options": [ 
        { 
         "value": "", 
         "text": "Select Country" 
        }, 
        { 
         "value": "in", 
         "text": "India", 
         "selected": "true" 
        }, 
        { 
         "value": "us", 
         "text": "United Stated" 

        }, 
        { 
         "value": "uk", 
         "text": "United Kingdom" 
        }, 
        { 
         "value": "cn", 
         "text": "Canada" 
        } 
       ] 
     }; 

     var selectedvalue = ''; 

     $("body").append($("<label />", { html: jsonObject.label, 'for': jsonObject.name }), 
     $("<select id='ddlSelect' />", { id: jsonObject.id, name: jsonObject.name }).html($.map(jsonObject.options, function (entity, i) { 
      if (entity.selected == "true") 
       selectedvalue = entity.value; 
      return '<option value="' + entity.value + '">' + entity.text + '</option>'; 
      //return $("<option />", { value: entity.value, text: entity.text }); 
     }).join(''))); 

     $('#ddlSelect').val(selectedvalue).trigger('change'); 
    }); 

的演示中看到此鏈接：http://jsfiddle.net/nanoquantumtech/vUwVq/