How to be a div id is undefined in javaScript?

Question

I want to get the product id called "product_id" through a alert in javaScript. But it gives "undefined" as the alert. I am getting data from a database.

Here is my PHP code.

$jsql_ae7 = mysql_query("select request_list.product_id from request_list where request_list.product_id='{$jrowa2['id']}' and request_list.email='$visit_email'") or die(mysql_error());

$jfeta7 = mysql_fetch_assoc($jsql_ae7);

Here is my HTML code.

<div class="col-sm-2">
    <select id="<?php echo $jfeta7['product_id']; ?>" name="aformats" onchange="showFormat(this);">
        <option value="<?php echo $jrowa2['formats']; ?>"><?php echo $jrowa2['formats']; ?></option>

        <?php foreach($formats3 as $v3){  ?>
            <?php if($v3 !== $jrowa2['formats']) { ?>
                <option value="<?php echo $v3; ?>"><?php echo $v3; ?></option>
            <?php } ?>

       <?php } ?>

    </select>
</div>

Here is my javaScript code.

var showFormat = function(dd) {
    var format_select_id = $(this);
    var product_id = format_select_id.attr("id");
    alert(product_id);
};

Here is a screenshot of my page.

Answer 1

change with this

var showFormat = function(dd) {
            var product_id = dd.id;
            alert(product_id);
        };

Answer 2

Why not just pass the product id directly?

<select id="<?php echo $jfeta7['product_id']; ?>" name="aformats" onchange="showFormat(<?php echo $jfeta7['product_id']; ?>);">

and your showFormat()

function showFormat(dd) {
    alert(dd);
};