2

いくつかのオプションを使用してセレクターコンポーネントを作成しようとしています。これでは何の結果も得られません。私がこれをしている方法に何か問題があります。

誰かがこれを手伝ってくれますか？

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

4

5 に答える 5

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

デモ

于 2012-08-11T11:39:06.863 に答える
0

JavaScriptを使用してHTMLを作成すると、面倒になる可能性があります。この場合、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

于 2012-08-11T11:40:40.693 に答える
0

これを試して

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;

}

于 2012-08-11T11:56:16.010 に答える
0

これが私のバージョンのジェネレーターです。:)

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

[実際に見てください]

  • これにより、複数のデータセットを処理できます
  • スケーラビリティとして、選択したタイプ以上のものをカバーするように拡張できます。
于 2012-08-11T12:09:09.733 に答える
0 
 $(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/

于 2012-08-11T14:23:24.427 に答える