追加機能内でコレクションから要素を作成する

添付されたdiv内に選択ボックスを生成したいと思います。しかし、各関数をjQueryで実行すると、nullが生成されます。しかし、append関数の外では正常に動作します。ここで追加機能内でコレクションから要素を作成する

私の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(); 
     });

出典

2017-09-06 kazi

です：

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>

出典

2017-09-06 11:49:22 Stuart

を

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(); 
 
     });

それを試してみてください210

出典

2017-09-06 11:54:12

これを試してみてください：

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 ?"} 
 
     ] 
 
\t 
 
    var ts=''; 
 

 
\t $.each(obj, function(key, value) { 
 
\t  ts += "<option value='"+ value['id'] +"'>" + value['question_title'] + "</option>"; 
 

 
    }) 
 

 
\t $(".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(); 
 
     });

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

出典

2017-09-06 13:15:44

追加機能内でコレクションから要素を作成する

答えて

関連する問題