Question

我正在尝试制作一个带有一个输入和一个下拉字段的内联可编辑表。输入字段有效，但我无法创建下拉字段。这是我的HTML和我的ajax。

html：

            <table id='news' class='table table-hover table-striped table-bordered table-responsive'>
            <thead>
                <tr>
                    <th>No</th>
                    <th>Title</th>
                    <th>Category</th>
                    <th>DElete</th>
                </tr>
            </thead>
            <tbody class='body-table-berita'>

 <?php 
$no=1;
foreach ($hasil as $berita) {
    echo "<tr data-id='$berita[id]'>";
    echo "<th class='nomor'>$no</th>";
    echo "<td>
            <span class='berita-text editable-span' data-id='$berita[id]'>$berita[berita]</span>
            <input type='text' class='form-control form-berita hideme' data-id='$berita[id]' value='$berita[berita]' />
        </td>"; 
    echo "<td>
            <span class='link-text editable-span' data-id='$berita[id]'>$berita[link]</span>
            <input type='text' class='form-control form-link hideme' data-id='$berita[id]' value='$berita[link]' />
        </td>";
    echo "<td><i class='fa hapus-news fa-close hapus-icon' data-id='$berita[id]'></i></td>";


    echo "</tr>";

    $no++;
}
?>

            </tbody>
        </table>

还有我的ajax：

    $(document).on("click",".berita-text, .link-text",function(e){
  var target=$(e.target);
 var id=target.attr('data-id');
 target.hide();
 if(target.is(".berita-text")){
  $("input[class~='form-berita'][data-id='"+id+"']").show().focus();
} else if (target.is(".link-text")){
  $("input[class~='form-link'][data-id='"+id+"']").show().focus();

}
 });



  $(document).on("keydown",".form-berita , .form-link",function(e){
   var target=$(e.target);

   if(e.keyCode==13){
      if(!target[0].saved){
        target[0].saved=true;
      var id=target.attr('data-id'); 
      var vall=target.val();
      var data={id:id,nilai:vall};

        if(target.is(".form-berita")){
          data.modul="berita";

        } else if (target.is(".form-link")){
          data.modul="link";

        }

        $.ajax({
          type:"POST",
          data:data,
          url:"<?php echo base_url('ajax/update_news'); ?>",
          cache:false,
          dataType: 'json',
          success: function(a){

          target.val(a.value).hide();

         if(target.is(".form-berita")){

          $("span[class~='berita-text'][data-id='"+id+"']").text(a.value).show();

          } else if (target.is(".form-link")){

          $("span[class~='link-text'][data-id='"+id+"']").text(a.value).show();

          }


          },
          error: function(a,b,c){
                    error_alert("ERROR");                    
          },
          complete: function(){
            target[0].saved=false;
          }

        });

      }
   } 




    });

现在，我将两个字段都设置为输入，并且可以使用，但是当我尝试选择下拉选项时，它不起作用。对于类别，我有2个选项，category 1和id 1，category 2和id 2，在数据库类别行中为ini，并且只为类别写id。

谢谢

Answer 1

HTML代码：

<select class='form-control form-link hideme' data-id='$berita[id]' value='$berita[link]'></select>

JS代码：

$.ajax({
      type:"POST",
      data:data,
      url:"<?php echo base_url('ajax/update_news'); ?>",
      cache:false,
      dataType: 'json',
      success: function(a){
           // I'm not sure your response data structure. But I suppose that there is a list here.
           var list = a.list;
           var select = $('.form-link').html("");
           for (var i=0; i<list.length-1; i++) {
                select.append("<option value=" + list[i] + ">" + list[i] + "</option>");
           }
      }
 });

注意：由于发问者的评论，此内容已过时。

对于那些想看到其他选项的人：

尝试使用此工具：https://select2.org/。易于使用。

否则，您可以从jQuery UI https://jqueryui.com/autocomplete/中使用此代码。

Answer 2

此：

$("input[class~='form-link'][data-id='"+id+"']").show().focus();

替换为：

$("select[class~='form-link'][data-id='"+id+"']").show().focus();

并且当点击字段时将显示下拉列表选择

内联编辑表下拉选择选项

2 个答案:

注意：由于发问者的评论，此内容已过时。