Thiết kế website giá rẻ

Question

Hi to respected Members!
I am using Choosen plugin with my drop down list to so that it can filter value as well by using search field. Everything is working fine but it create one issue for me as display in below pic .It Changed the style of drop down field and it look very different from default style of other field such as Qty and remarks.
pic of the form
I want to learn is there is any way by which I enforced default style to my drop down list field.
Below is my code

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Medicine Re-Location Form</title> 

    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">      
    
  
   

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
     <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css">
  
</head>
  <body>




<div class="container">
  <div class="card">
    <h3 div class="card-header" style="background-color: #3fbbc0;">Request Form</h3>
    <div class="card-body">
    <form method="POST" action="invoice.php">
            <div class="card-body">              
                            
                            
                        </div>         






  <table class="table table-bordered">
                    <thead class="table-success" style="background-color: #3fbbc0;">
                      <tr>
                        
                        <th width="15%"><center>Product</th>                       
            <th width="10%"><center>Qty (No)</th>                    
                    
            <th width="20%"><center>Remarks</th>
            <th width="5%"></th>

                                               
                         <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                        </th>
</tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" >
   <div class="col-lg-4"><div class="form-group">
 <td><Select  class="scode form-control text-end" name="scode[]" id = "scode"  class="form-control"  required onchange="GetDetail(this.closest('tr'))">
<option value="">Select Product</option>
    <?php
    include('db.php');
    $sql = mysqli_query($con,"SELECT * FROM procd2");
    while($row=mysqli_fetch_array($sql))
    {
    echo '<option value="'.$row['pro1'].'">'.$row['pro1'].'</option>';
    } ?></select>



</td>

       
        <td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" pattern="d+"></td>
            
     
      
           <td><input type="text" class="form-control text-end" name="remarks3[]"  id="zzz" ></td>
        <td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
            
                      </tr>   </tbody> </table>


**<script>

jQuery('.scode').chosen();
</script>**


 <div class="col-lg-4"> <div class="form-group"><center>
        <input type="submit" name="submit" id="submit" value="Submit"  class="btn btn-success submit_btn invoice-save-btm">     
    

</form>   
 </body>
</html>

here is java script code

<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
 
    $('.scode').chosen('destroy');
    var v = $('#TRow').clone().appendTo('#TBody');
    $(v).removeAttr('id');
    $('.scode').chosen({width: '100%'});
    $(v).find("input").val('');
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}



function BtnDel(v)
{
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();

        $("#TBody").find("tr").each(
        function(index)
        {
           $(this).find("th").first().html(index);
        }

       );
}

Thiết kế website giá rẻ

Danh mục

Choosen plugin change the style of drop down field