Question

我想在附加的div中生成一个选择框。但是，当我执行jQuery的每个函数时，它会产生null。但是在追加函数之外它可以正常工作。

这是我的jQuery代码

var data = [
              {"id":87,"question_title":"Mobile Operator"},
              {"id":88,"question_title":"which reason ?"},
              {"id":89,"question_title":"Why choice this reason ?"},
              {"id":90,"question_title":"When you use this ?"}
         ]
$(".customTerm").append(
       '<tr>' +
       '<td>'+
       '<select  class="form-control input-sm" name="answer">'+
        $.each(data, function(key, value) {
            "<option>" + value['id'] + "</option>"
        })+
        '</select>'+
        '</td>'+
        '<td>'+
        '<a href="javascript:void(0);" class="btn btn-danger btn-squared btn-sm remove-term"><i class="fa fa-minus"></i> Remove</a>'+
        '</td>' +
         '</tr>'
      );
      $(".remove-term").on('click',function(){
           $(this).parent().parent().remove();
       });

Answer 1

您需要以下内容：

var obj = [
              {"id":87,"question_title":"Mobile Operator"},
              {"id":88,"question_title":"which reason ?"},
              {"id":89,"question_title":"Why choice this reason ?"},
              {"id":90,"question_title":"When you use this ?"}
         ]
$(".customTerm").append(
       '<tr>' +
       '<td>'+
       '<select  class="form-control input-sm" name="answer">'+
        createOptions(obj) + 
        '</select>'+
        '</td>'+
        '<td>'+
        '<a href="javascript:void(0);" class="btn btn-danger btn-squared btn-sm remove-term"><i class="fa fa-minus"></i> Remove</a>'+
        '</td>' +
         '</tr>'
      );
      $(".remove-term").on('click',function(){
           $(this).closest('tr').find('select option:selected').remove();
       });
       
       
       function createOptions(obj)
       {
           var ret = '';
           $.each(obj, function(key, value) {
             ret += "<option value='" + value['id'] + "'>" + value['question_title'] + "</option>"
           });
           return ret;
       }

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

Answer 2

试试吧

var obj = [
    {"id":87,"question_title":"Mobile Operator"},
    {"id":88,"question_title":"which reason ?"},
    {"id":89,"question_title":"Why choice this reason ?"},
    {"id":90,"question_title":"When you use this ?"}
]
var opts="";
$.each(obj, function(key, value) {
     opts+="<option value='"+ value['id'] +"'>" + value['question_title'] + "</option>";
});
$(".customTerm").append(
       '<tr>' +
       '<td>'+
       '<select  class="form-control input-sm" name="answer">'+
        opts+
        '</select>'+
        '</td>'+
        '<td>'+
        '<a href="javascript:void(0);" class="btn btn-danger btn-squared btn-sm remove-term"><i class="fa fa-minus"></i> Remove</a>'+
        '</td>' +
         '</tr>'
      );
      $(".remove-term").on('click',function(){
           $(this).parent().parent().remove();
       });

Answer 3

试试这个：

＆＃13;

var obj = [
              {"id":87,"question_title":"Mobile Operator"},
              {"id":88,"question_title":"which reason ?"},
              {"id":89,"question_title":"Why choice this reason ?"},
              {"id":90,"question_title":"When you use this ?"}
         ]
	
    var ts='';

	$.each(obj, function(key, value) {
	    ts += "<option value='"+ value['id'] +"'>" + value['question_title'] + "</option>";

    })

	$(".customTerm").append(
       '<tr>' +
       '<td>'+
       '<select class="form-control input-sm" name="answer">'+ts+'</select>'+'</td>'+'<td>'+
        '<a href="javascript:void(0);" class="btn btn-danger btn-squared btn-sm remove-term"><i class="fa fa-minus"></i> Remove</a>'+
        '</td>' +
         '</tr>'
      );
      $(".remove-term").on('click',function(){
           $(this).parent().parent().remove();
       });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<body>
<div>
	<table class="customTerm" border='1' cellpadding="0" cellspacing="0">
	</table>
</div>
</body>

＆＃13;

从append函数中的集合创建元素

3 个答案: