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

时间:2015-09-07 11:34:23

标签: javascript jquery html

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

1 个答案:

答案 0 :(得分:3)

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>