Javascript 为什么选择显示会显示值而不是标签？

我正在尝试使用带内联编辑的select。我已经得到了这个正确显示使用的编辑弹出窗口，但我希望它都是内联和提交模糊。我的数据包括每个下拉项的ID和名称，我在一个类似于{label:“blah”，value:“blah”}等的对象中有这个ID和名称

但是，在DataTable中，所有下拉列表都以ID而不是标签作为默认值显示。我不希望用户看到id。我尝试将编辑器字段名设置为标签，将DataTable列设置为值，这似乎适用于弹出窗口，但对于内联编辑，我收到错误“Uncaught无法从源自动确定字段。请指定字段名”

我的初始化如下所示：

editor = new $.fn.dataTable.Editor({
      ajax: 'url',
      table: '#table',
      idSrc: 'id',
      fields: [{
          label: "Location",
          name: "location_name", //this is where the problem is, I think
          type: "select",
          ipOpts: locationList
      }]})

 $('#table').dataTable({
      dom: "Tfrtip",
      "searching": false,
      "ajax": {
          "url": "url",
          "type": "GET"
      },
      "columnDefs": [
        { "visible": false, "targets": [8] }
      ],
      "columns": [
          { "data": "location_id" }
      ])}

如果我将DataTable更改为使用名称，则显示是正确的，但我会将名称提交到数据库，而不是ID，并且我需要ID

---

我该怎么办？

我是这样做的，虽然很凌乱，但很有效：

每个可编辑对象都有自己的跨度类。与父对象相关的ID。与正在更新的对象相关的键。当然还有数据

<td><span class="dcmeta" data-value="'.$row['DATACENTER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="DATACENTER">'.$row['DATACENTER'].'</span></td>
<td><span class="tiermeta" data-value="'.$row['TIER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="TIER">'.$row['TIER'].'</span></td>

。$row['DATACENTER']
“.$行['TIER']”

Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {  
    $.fn.editable.defaults.mode = 'popup';
    $('.xedit').editable(); 
    $('.tiermeta').editable({
    title: 'Test title',
    source: [
          {value: 'Tier 1', text: 'Tier 1'},
          {value: 'Tier 2', text: 'Tier 2'},          
       ]
    }); 
    $('.dcmeta').editable({
    title: 'Test title',
    source: [
          {value: 'DC1', text: 'DC1'},
          {value: 'DC2', text: 'DC2'},           
       ]
    });     
    $(document).on('click','.editable-submit',function(){
    var key = $(this).closest('.editable-container').prev().attr('key');
    var x = $(this).closest('.editable-container').prev().attr('id');
    var y = $('.input-metadata').val();
    var z = $(this).closest('.editable-container').prev().text(y);
        $.ajax({
            url: "process.php?id="+x+"&data="+y+"&key="+key,

            type: 'GET',
            success: function(s){
                if(s == 'status'){
                $(z).html(y);}
                if(s == 'error') {
                alert('Error Processing your Request! ');}
            },
            error: function(e){
                alert('Error Processing your Request!! ');
            }
        });
    });
});
</script>

jQuery（文档）.ready（函数（）{
$.fn.editable.defaults.mode='popup'；
$（'.xedit'）.editable（）；
$（'.tiermeta'）。可编辑({
标题：'测试标题'，
资料来源：[
{值：'Tier 1'，文本：'Tier 1'}，
{值：'Tier 2'，文本：'Tier 2'}，
]
}); 
$（'.dcmeta'）。可编辑({
标题：'测试标题'，
资料来源：[
{值：'DC1'，文本：'DC1'}，
{值：'DC2'，文本：'DC2'}，
]
});     
$（文档）。在（'单击'，'上。可编辑提交'，函数（）{
var key=$（this）.closest（'.editable container'）.prev（）.attr（'key'）；
var x=$（this）.closest（'.editable container'）.prev（）.attr（'id'）；
var y=$（'.input metadata'）.val（）；
var z=$（this）.closest（'.editable container'）.prev（）.text（y）；
$.ajax({
url:“process.php？id=“+x+”&data=“+y+”&key=“+key，
键入：“GET”，
成功：功能{
如果（s==‘状态’）{
$（z）.html（y）；}
如果（s=='错误'）{
警报（'处理请求时出错！'）；}
},
错误：函数（e）{
警报（'处理您的请求时出错！！'）；
}
});
});
});

PHP:

---

我是这样做的，虽然很凌乱，但很有效：

每个可编辑对象都有自己的跨度类。与父对象相关的ID。与正在更新的对象相关的键。当然还有数据

<td><span class="dcmeta" data-value="'.$row['DATACENTER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="DATACENTER">'.$row['DATACENTER'].'</span></td>
<td><span class="tiermeta" data-value="'.$row['TIER'].'" data-type="select" id="'.$row['CLUSTERNAME'].'" key="TIER">'.$row['TIER'].'</span></td>

。$row['DATACENTER']
“.$行['TIER']”

Javascript:

<script type="text/javascript">
    jQuery(document).ready(function() {  
    $.fn.editable.defaults.mode = 'popup';
    $('.xedit').editable(); 
    $('.tiermeta').editable({
    title: 'Test title',
    source: [
          {value: 'Tier 1', text: 'Tier 1'},
          {value: 'Tier 2', text: 'Tier 2'},          
       ]
    }); 
    $('.dcmeta').editable({
    title: 'Test title',
    source: [
          {value: 'DC1', text: 'DC1'},
          {value: 'DC2', text: 'DC2'},           
       ]
    });     
    $(document).on('click','.editable-submit',function(){
    var key = $(this).closest('.editable-container').prev().attr('key');
    var x = $(this).closest('.editable-container').prev().attr('id');
    var y = $('.input-metadata').val();
    var z = $(this).closest('.editable-container').prev().text(y);
        $.ajax({
            url: "process.php?id="+x+"&data="+y+"&key="+key,

            type: 'GET',
            success: function(s){
                if(s == 'status'){
                $(z).html(y);}
                if(s == 'error') {
                alert('Error Processing your Request! ');}
            },
            error: function(e){
                alert('Error Processing your Request!! ');
            }
        });
    });
});
</script>

jQuery（文档）.ready（函数（）{
$.fn.editable.defaults.mode='popup'；
$（'.xedit'）.editable（）；
$（'.tiermeta'）。可编辑({
标题：'测试标题'，
资料来源：[
{值：'Tier 1'，文本：'Tier 1'}，
{值：'Tier 2'，文本：'Tier 2'}，
]
}); 
$（'.dcmeta'）。可编辑({
标题：'测试标题'，
资料来源：[
{值：'DC1'，文本：'DC1'}，
{值：'DC2'，文本：'DC2'}，
]
});     
$（文档）。在（'单击'，'上。可编辑提交'，函数（）{
var key=$（this）.closest（'.editable container'）.prev（）.attr（'key'）；
var x=$（this）.closest（'.editable container'）.prev（）.attr（'id'）；
var y=$（'.input metadata'）.val（）；
var z=$（this）.closest（'.editable container'）.prev（）.text（y）；
$.ajax({
url:“process.php？id=“+x+”&data=“+y+”&key=“+key，
键入：“GET”，
成功：功能{
如果（s==‘状态’）{
$（z）.html（y）；}
如果（s=='错误'）{
警报（'处理请求时出错！'）；}
},
错误：函数（e）{
警报（'处理您的请求时出错！！'）；
}
});
});
});

PHP:

谢谢您的回答！你能确切地解释一下你在这里做什么吗？我有点困惑，因为您的下拉列表似乎没有特定的ID（值和文本相同）。谢谢您的回答！你能确切地解释一下你在这里做什么吗？我有点困惑，因为您的下拉列表似乎没有特定的ID（值和文本相同）。