Dynamic ID for Dropdown in datatable

canwejustcode

I have a dropdown in my datatable, however, I want to give it an ID of another data element that is on the same row.
I'm able to do this with my textboxes and checkboxes in my datatable, however, when I try this for the dropdown, I can an error that it can't find the data element I'm trying to define for my ID or is there a better way to do this? I'm building a JSON file and the JSON fields are the name of the fields in the table

my column code

columns: [
  {
      data: "id",
      visible: false
  },
                        {
                            data: "label",
                            render: function (data, type, row) {
                                return '<a href="#" id="x" onClick="getParent(' + row.id + ',' + "'" + data + "'" + ')">' + data + '</a>';
                            }
                        },
                      
                        {
                            data: "region",
                            defaultContent: '',
                            render: function (data, type, full, meta) {
                            // need to make the ID and name to have the { id } data value from the JSON
                                var $select = $('<select  class="form-select form-select-sm" name="regionSelection_' + data + '" id="regionSelection_' + data + '"> </select>',   
                                {
                                    "id": "region"
                                
                                });
                                $.each(data, function (k, v) {
                                    var $option = $("<option></option>", {
                                        "text": v,
                                        "value": v,
                                    });
                                    if (data === v) {
                                        $option.attr("selected", "selected")
                                    }
                                    $select.append($option);
                                });
                                return $select.prop("outerHTML");
                            }
                        }
]

allan

Doesn't line 18 set an id as an attribute, and then line 20 overrides that?

Aside from that I don't immediately see what would be causing the error you mention there I'm afraid. Can you link to a test case please?

Allan

canwejustcode

No, because that's the value being shown. I changed that to the field from the JSON I want to use, and it kicks out the error. Let me see if I can do a test, the pc I'm running this one doesn't have access to this site. So, let me try to create something

canwejustcode

I got it working:
Once I removed the { $ } in front of the select, it worked as expected:

changed

 var $select = $('<select  class="form-select form-select-sm" name="regionSelection_' + data + '" id="regionSelection_' + data + '"> </select>',  

to this

var select = $('<select  class="form-select form-select-sm" name="regionSelection_' + data + '" id="regionSelection_' + data + '"> </select>',