<!-- Include Select2 CSS & JS -->
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2 on your dropdown
    $('#jobcard_dropdown').select2({
        placeholder: "Select Jobcard",
        allowClear: true,
        width: 'resolve'
    });

    // Optional: do something when selection changes
    $('#jobcard_dropdown').on('change', function() {
        var selected_id = $(this).val();
        console.log("Selected Jobcard ID:", selected_id);
    });
});
</script>

<tr id="old_jobcard_main" style="display:none;">
  <td height="20">&nbsp;</td>
  <td colspan="2" align="right" class="text" style="padding-left:15px;font-size:14px;">
    <div id="jobcard_type_div1">Select Jobcard</div>
    <!-- <span style="color:#FF0000">*</span>&nbsp;&nbsp;  -->
  </td>
  <td>
    <div id="jobcard_type_div">
      &nbsp;&nbsp;
      <?php
      include("../../include/db.php"); // Your DB connection

      // Fetch all jobcards
      $res = mysql_query("SELECT main_id, jobcard_no FROM jobcard_main ORDER BY jobcard_no ASC");
      ?>
<select id="jobcard_dropdown" name="jobcard_dropdown" style="width:200px; height:28px;" onchange="get_re_pro_jobcard(this.value);">

        <option value="">Select Jobcard</option>
        <?php
        while($row = mysql_fetch_assoc($res)) {
            echo "<option value='".$row['jobcard_no']."'>".$row['jobcard_no']."</option>";
        }
        ?>
      </select>


      <!-- <div id="customer_name_validation_div" style="color:#F00"></div> -->
    </div>
  </td>
</tr>
