动态创建单选按钮和标签

Question

好吧，我想实现的是它为我从web服务返回的每条记录自动创建。

<label for="ZAALID_1">Zaal 1</label> 
        <input id="ZAALID_1" type="radio" name="RESERVATIE.ZAALID" value="1" MSGCHECKED="~IF(CHKPROP(@RESERVATIE.ZAALID,'1'),CHECKED,)~" /> 

我打电话给这个webservice ajax调用。这个电话没有任何问题。我通过打印数值来测试它。

$.ajax({ 
      url: "~SYSTEM.URL~~CAMPAIGN.URL~/SelligentMobile/Webservice/WebService.asmx/getReservaties", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{'DATUM_BEGIN':'2012-05-09 10:10:36','DATUM_EINDE':'2012-05-09 12:10:45'}", 
      success: function (response) {  
      var zalen = response.d; 
       if (zalen.length > 0) { 
         $.each(zalen, function (index, zaal) { 
        createRadioElement(zaal.zaalId); 
        createLabel(zaal.zaalNaam,zaal.zaalId); 
       }); 
      } 
      }   
     }); 

所以我认为CreateRadioElement和createLabel存在错误。 以下是这两个功能。

function createRadioElement(id) { 
     var radioInput; 
     try { 
       var radioHtml = '<input id="ZAALID_' + id + '" type="radio" name="RESERVATION.ZAALID" value="' + id + '" MSGCHECKED="~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ '; 
       radioHtml += '/>'; 
      radioInput = document.createElement(radioHtml); 
      } catch(err) { 
       radioInput = document.createElement('input'); 
       radioInput.setAttribute('type', 'radio'); 
       radioInput.setAttribute('name', 'RESERVATION.ZAALID'); 
      } 
    return radioInput; 
    } 
    function createLabel(name,id) { 
     var label; 
     var labelHTML = '<label for="ZAALID_' + id + '">'+ name +'</label>'; 

     label = document.createElement(labelHTML); 
     return label; 
    } 

现在，我想要做的另一件事是，一个id = zaalField 地方这些单选按钮在div内这里是DIV

<div id=ZaalField data-role="fieldcontain" class="knoppen_boven"> 
       <LABEL for=zaal>Zalen ter beschikking: </LABEL> 

        //Here should go the radiobuttons and labels. 

      </div> 

任何人可以帮助的HTML？

亲切的问候

---编辑---

function getZalen() 
    { 
     var dateB = $("#DATUM_BEGIN").val(); 
     var dateE = $("#DATUM_EINDE").val(); 
     console.log(dateB); 
     $.ajax({ 
      url: "~SYSTEM.URL~~CAMPAIGN.URL~/SelligentMobile/Webservice/WebService.asmx/getReservaties", 
      type: "POST", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      data: "{'DATUM_BEGIN':'2012-05-09 10:10:36','DATUM_EINDE':'2012-05-09 12:10:45'}", 
      success: function (response) {  
      var zalen = response.d; 
      alert(JSON.stringify(zalen)); 
       if (zalen.length > 0) { 
        $.each(zalen, function (i, entity) { 
        $('ZaalField ').append(
          $('<label />', { 'for': 'ZAALID_' + entity.zaalId, 'text': entity.zaalNaam }), 
          $('<input />', { 'id': 'ZAALID_' + entity.zaalId, 'type': 'radio', 'name': 'RESERVATION.ZAALID', 'value': entity.zaalId, 'MSGCHECKED': '~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ ' }), $('<br />')); 
       }); 
      } 
      }   
     }); 
    } 

Answer 1

function createLabel(id, name){ 
    var name = "Zaal 2"; 
    var label = document.createElement("label"); 
    label.setAttribute("for","RANDOM"+id); 
    label.innerHTML = name; 
    return label; 
} 

var label = createLabel(2, "Zaal 2"); 
$(document.body).append(label); //add it to the body, or to whatever else you want to add it to. 

此代码的工作对我来说，当你写的代码没有。

Answer 2

$(document).ready(function() { 
      var data = { "d": [{ "__type": "Reservatie", "zaalId": 2, "opmerking": null, "zaalNaam": "Zaal 2" }, { "__type": "Reservatie", "zaalId": 3, "opmerking": null, "zaalNaam": "Zaal 3"}] }; 

      //   $.ajax({ 
      //    url: "/SelligentMobile/Webservice/WebService.asmx/getReservaties", 
      //    type: "POST", contentType: "application/json; charset=utf-8", 
      //    dataType: "json", data: { 'DATUM_BEGIN': '2012-05-09 10:10:36', 'DATUM_EINDE': '2012-05-09 12:10:45' }, 
      //    success: function (data) { 
      if (data.d.length > 0) { 
       $.each(data.d, function (i, entity) { 
        $('body').append(
          $('<label />', { 'for': 'ZAALID_' + entity.zaalId, 'text': entity.zaalNaam }), 
          $('<input />', { 'id': 'ZAALID_' + entity.zaalId, 'type': 'radio', 'name': 'RESERVATION.ZAALID', 'value': entity.zaalId, 'MSGCHECKED': '~IF(CHKPROP(@RESERVATIE.ZAALID,' + 1 + '),CHECKED,)~ ' }), $('<br />')); 
       }); 
      } 
      //    } 
      //   }); 
     });