如何使用ajax动态创建单选按钮答案

【问题标题】：How to dynamically create a radio button with ajax如何使用ajax动态创建单选按钮
【发布时间】：2018-02-09 08:03:17
【问题描述】：

我正在使用 ajax 提取数据并以表单形式显示。如果用户单击从 ajax 返回的任何结果，它会更新输入字段。现在，我想在每个名称旁边添加单选按钮，而不是只显示列表中的名称。

这是我的代码。

$(function() {
$('#searchpartno').keyup(function() {
    var item = $(this).val();
    var item_value = $('#price_luitem_id').val();

    $.ajax({
        "url": "/searchpartno_stock",
        "data": {"partnumber":item,"luitem_id":item_value},
        "type": "get",
        "dataType": "json",
        "success": function(items) {
            $('#partnumber_tbody').empty();
            var clearHTML = '<tr>' +'<td></td>' +'</tr>';
            var trHTML = '';
            $.each(items, function (i, item) {
                trHTML += '<tr>' +'<td onclick="updatePartNo(this)" class="partspare_list">' + item.partnum + '</td>' +'</tr>';
            });
            $('#partnumber_tbody').append(clearHTML);
            $('#partnumber_tbody').append(trHTML);
        },
        "error": function() {
            $('#dailysale_price').val('');
        }
    });
})
})

这是输出

【问题讨论】：

出于好奇，为什么不省去麻烦，在服务器端做所有事情呢？
我没想到。再说了，我还是 ROR 的新手。
嗯，为了我的钱，这是要走的路。

标签： javascript jquery ruby-on-rails ajax

【解决方案1】：

不要将partnum作为文本附加，而是像创建tr和td一样创建一个单选按钮

 $.each(items, function (i, item) {
    trHTML += '<tr>' +
              '<td onclick="updatePartNo(this)" class="partspare_list">' +
                '<input type="radio" name="itemnum" value="' + item.partnum 
              + '">' + item.partnum + '<br>' +
              '</td>' +
              '</tr>';
 });

【讨论】：

它在结束时给了我一个错误'';。它需要一个新行或一个分号。
Opps，刚刚修复
谢谢。现在获取单击名称并更新另一个输入的 jquery 不再运行。查看console.log：localhost:3000/…>
这是有效的。但是当我单击名称时，单选按钮不会被选中。我该如何解决这个问题？

【解决方案2】：

只需添加无线电输入，如下所示：

$.each(items, function (i, item) {
       trHTML += '<tr>
                   <td onclick="updatePartNo(this)" class="partspare_list">
                     <input type="radio" name="itemRd" value="'+i+'">
                     ' + item.partnum + '
                   </td>
                 </tr>';
});

【讨论】：