OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Choosen plugin change the style of drop down field

  • Thread starter Thread starter Student
  • Start date Start date
S

Student

Guest
I am using the Chosen plugin with my drop down list to so that it can filter values as well by using search field.

Everything is working fine but it creates one issue for me as displayed in the below pic:

enter image description here

It changed the style of the drop down field and it looks very different from the default style of other fields such as Qty and Remarks.

I want to learn if there is any way which I can enforce the default style to my drop down list field?


Code:
function GetPrint() {
  window.print();
}

function BtnAdd() {
  $('.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) {
  $(v).parent().parent().remove();
  GetTotal();

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

Code:
<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">

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

<p>I am using the Chosen plugin with my drop down list to so that it can filter values as well by using search field.</p>
<p>Everything is working fine but it creates one issue for me as displayed in the below pic:</p>
<p><a href="https://i.sstatic.net/oTTOqOVA.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/oTTOqOVA.jpg" alt="enter image description here" /></a></p>
<p>It changed the style of the drop down field and it looks very different from the default style of other fields such as Qty and Remarks.</p>
<p>I want to learn if there is any way which I can enforce the default style to my drop down list field?</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function GetPrint() {
window.print();
}

function BtnAdd() {
$('.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) {
$(v).parent().parent().remove();
GetTotal();

$("#TBody").find("tr").each(function(index) {
$(this).find("th").first().html(index);
});
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><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">

<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></code></pre>
</div>
</div>
</p>
 

Latest posts

Top