如何使用数组元素作为按钮的标签动态创建单选按钮答案

【问题标题】：How to create radio buttons dynamically with array elements as label for buttons如何使用数组元素作为按钮的标签动态创建单选按钮
【发布时间】：2015-09-07 20:13:45
【问题描述】：

我想根据我从数据库调用的数组元素创建单选按钮。并且此元素应用作每个单选按钮的标签。我如何为它编码。我将 6 元素称为用户名建议。当客人选择任何按钮时，特定按钮的标签将替换客人输入的名称类型。谢谢你

【问题讨论】：

到目前为止你的尝试是什么？
显示来自数据库的数组示例和您期望的结果。
我知道如何动态创建单选按钮。但我不知道如何使用不同的标签创建它。就像我在输入“Michael”中输入一个名字一样。所以通过更改事件..这个值将进入它存在或不存在的数据库。如果这个值存在，那么我将得到数组 {“Michael5678”，“Michael5128”，“Michael2278”，“Michael2345”，“Michael5611”，“Michael9856”}。我必须将此值显示为带有单选按钮的用户名建议。所以如果客人选择任何值，那么它将替换字段中的输入值。

标签： javascript jquery html

【解决方案1】：

function showSuggestions() {
  var usernames = [
    'test1', 'test2', 'test3', 'test4'
  ];
  
  var result = $('#result');
  result.html('');

  for (var i = 0; i < usernames.length; i++) {
    result.append('<label><input type="radio" name="usernames" value="' + usernames[i] + '" /> ' + usernames[i] + '</label>');
  } 
}
                      
$('button').click(showSuggestions);

$('#result').on('change', 'input', function() {
  var elem = $(this);
  if (elem.is(':checked')) {
    $('#search').val(elem.val());
  }
});

label {
  display:block;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="search" type="search" /><button>Search</button>

<div id="result"></div>

【讨论】：

谢谢您，先生。我通过用我的代码实现它来尝试它。再次感谢。先生，您能建议我如何以垂直对齐方式显示此元素
谢谢。我几乎做了一切。但我不知道..为什么我在替换文本时遇到问题。最后一个函数不起作用，并且没有在控制台 elem.val() 上提供任何检查值。我在 js fiddle 中尝试此代码，并在检查时控制台所有这些数组元素。但是我的代码无法检查。我做错了什么？
是的，但是您将看不到数组。我从数据库调用。等等我应该做一个jsfiddle。并感谢您的关心
对不起先生。我认为这是您在 showSuggestion 函数中调用的方法。但现在我发现它是不同的功能。我打电话给它，现在一切正常。再次感谢先生