Question

我有一个数据表，当用户点击表格行时，它会获得{{ content.id }}并弹出另一个子表。

    <table id="project-content-datatable" class="display table table-hover table-responsive" style="width: 100%">
    <thead>
    <tr>
        <th class="small text-muted text-uppercase"><strong>ID</strong></th>
        <th class="small text-muted text-uppercase"><strong>Name</strong></th>
        <th class="small text-muted text-uppercase"><strong>Description</strong></th>
    </tr>
    </thead>
    <tbody>
    {% for content in content_list %}
        {% if content.search_type.name == searchtype.name %}
            <tr class="text-primary">
                <td class="text-left" style="cursor: pointer"
                    onclick='load_workorder({{ content.id }});'>
                    {{ content.id }}
                </td>
                <td class="text-left" style="cursor: pointer" onclick='load_workorder({{ content.id }});'>
                    {{ content.name }} </td>
                <td class="text-left"> {{ content.description }} </td>
            </tr>
        {% endif %}
    {% endfor content_list %}
    </tbody>

<script>
    function load_workorder(content_id) {
    workorder_path = "/dashboard/workorder_list/" + content_id + "/?format=json";
    workorder_table.api().ajax.url(workorder_path).load();
</script>

在子表中，我有一个按钮，用于弹出模式表单以在其中创建新内容，其中一个字段是下拉列表ForeignKey字段。

<div class="modal-body">
<div class="field">
<label>Project Type</label>
<select name="parent_project_content" required="" id="id_parent_project_content">
      <option value="">---------</option>

      <option value="1" selected="">Iron man suit</option>

      <option value="2">SEQ 001</option>

      <option value="4">SEQ 002</option>

    </select>
</div>

<option>值等于{{ content.id }}。我想向用户隐藏此字段，以便如何根据<option>点击将{{ content.id }}更改为所选内容按用户。

任何帮助都很有帮助，谢谢

Answer 1

因此，如果content.id值与select下拉列表中的选项匹配，那么jQuery非常简单。

这是一个小例子，但您需要做的就是调用selectOption()函数并传递content.id值：

// my simplified example to grab a value from the table 
$('td').click(function(){
  var value = $(this).text();
  selectOption(value);
});

// pass the value to this function
function selectOption(v){
  $('#id_parent_project_content option[value="'+v+'"]').prop('selected', true);
}

通过onClick on data-table行

1 个答案: