通过点击数据表行从下拉列表中选择一个选项

Question

I have a data-table when user click on the table row it will get the {{ content.id }} and pop up another child table.

    <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>

Inside the child table I have a button to pop up a modal form to create a new content in it, one of its field is a dropdown ForeignKey field.

<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>

The <option> value is equal to the {{ content.id }} .I want to hide this field from user so how can I change the <option> to selected based on the {{ content.id }} click by user.

Any help is much appreaciated, Thanks

Answer 1

So if the content.id value matches that of the option in the select dropdown the jQuery for that is pretty straightforward.

Here's a little example but all you need to do is call the selectOption() function and pass through your content.id value:

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