Question

这可能很容易但我在做这件事时遇到了困难。我的HTML中有3个单选按钮，现在我想要动态创建它们。

这是我正在使用的标准单选按钮（我正在使用引导程序）

<div class="input-group">
     <span class="input-group-addon"><input type="radio" class="locakable" name="radioGroup" value="First Radio Button" required></span>
     <input class="form-control locakableR" value="First Radio Button" readonly>
</div>

这就是我尝试创建它们的方式。但单选按钮没有填充。

<div id="serviceRadios"></div>

$.getJSON('php/service.php',function(dta){
      $.each(dta,function(index,item){
        var servicetypeRadios = $('<div class="input-group">
          <span class="input-group-addon"><input type="radio" name="radioGroup" class="locakable" value="'+item.serviceType_id+'" required/></span>
          <input class="form-control locakableR" value="'+item.service+'" readonly>
        </div><br />;');
      });

      $('#serviceRadios').html(servicetypeRadios);
      //servicetypeRadios.appendTo('#serviceRadios');
    });

Answer 1

$('#serviceRadios').html(servicetypeRadios);

您无法获得变量**servicetypeRadios**，因为它是一个局部变量。您可能需要正确声明servicetypeRadios。

Answer 2

我稍微修改了你的代码。请试试这个

$.getJSON('php/service.php',function(dta){
    var servicetypeRadios = '';
    $.each(dta,function(index,item){
        servicetypeRadios += '<div class="input-group">'+
                                    '<span class="input-group-addon"><input type="radio" name="radioGroup" class="locakable" value="'+item.serviceType_id+'" required/></span>'+
                                    '<input class="form-control locakableR" value="'+item.service+'" readonly>'+
                                '</div><br />';
    });
    $('#serviceRadios').html(servicetypeRadios);
      //servicetypeRadios.appendTo('#serviceRadios');
});

Answer 3

查看FIDDLE

我将提供的html作为模板，再次对数组中的值集重复;

让数组从异步调用中获取值，如下所示

  var listofvalues = ["Saab", "Volvo", "BMW"]; // your values from ajax

然后你可以用作

的jquery

    $(function () {
    $('a').on('click', function () {
        var $template = "<div class='input-group'><span class='input-group-addon'><input type='radio' class='locakable' name='radioGroup' value='{{radiovalue}}' required></span><input class='form-control locakableR' value='{{radiotext}}' readonly></div><br/>";
        var listofvalues = ["Saab", "Volvo", "BMW"]; // your values from ajax
       //  $('.input-group').html('');  // cleaning the div to populate again
        $.each(listofvalues, function (index, value) {

            $('#serviceRadios').append($template.replace('{{radiovalue}}', value).replace('{{radiotext}}', value))
        });
    });
});

希望它有所帮助...

使用jquery创建单选按钮 - Bootstrap

3 个答案: