Question 35873 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to auto-fill an select box based on the selection PHP/JQuery

can someone teach me on how to auto fill an select box based on the selection from the other select box?

this is my first selection wherein the user will select in Orderlist Code.

   <div class="form-group">
   <label for="gross_amount" class="col-sm-2 control-label" style="text-align:left;">OL Code</label>
   <div class="col-sm-6">
   <select class="form-control" id="table_name" name="table_name">
   <?php foreach ($orderlist_data as $key => $value): ?>
   <option value="<?php echo $value['id'] ?>"><?php echo $value['ol_code'] ?></option>  
   <?php endforeach ?>                     
   </select>
   </div>
   </div>

after the selection base on the Order list code i hope to auto fill this selection base on the selection in the orderlist code.

create.php

<select class="form-control select_group product" data-row-id="row_1" id="product_1" name="product[]" style="width:100%;" onchange="getProductData(1)" required>
<option value='maincat' selected>--Select Products--</option>
<?php foreach ($products as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"><?php echo $v['name'] ?></option>
<?php endforeach ?>
</select>

edit.php

<select class="form-control select_group product" data-row-id="row_<?php echo $x; ?>" id="product_<?php echo $x; ?>" name="product[]" style="width:100%;" onchange="getProductData(<?php echo $x; ?>)" required>
<option value=""></option>
<?php foreach ($products as $k => $v): ?>
<option value="<?php echo $v['id'] ?>"  <?php if($val['product_id'] == $v['id']) { echo "selected='selected'"; } ?>><?php echo $v['name'] ?></option>
<?php endforeach ?>
</select>

here is an photo on the orderlist module
enter image description here

then i hope someone can teach me how to auto-fill the product selection based in the orderlist selection
enter image description here
if i press the "OLCODE-1E6E" in the orderlist code selection i want to automate my product selection and display the 2 items i set in the orderlist but does not have knowledge from it i hope someone can teach.

 function getProd(row_id)
  {
    var orderlist_id = $("#olcode_"+row_id).val();    
    if(orderlist_id == "") {


      //i don't know the correct way


    } else {
      $.ajax({
        url: base_url + 'orderlist/getOrderListById',
        type: 'post',
        data: {orderlist_id : orderlist_id},
        dataType: 'json',
        success:function(response) {
          
        //i don't know the correct way


        } 
      }); 
    }
  }
Tags:

2

Answers


  1. 0

    I think you can use the jquery autocomplete ui along with php to return all the values. If it doesn’t work with the <select> tag then just swap it with an <input> so the user can type in the product and use the list of autocompletions to help.
    I hope that is helpful.

    Login or Signup to reply.
  2. 0

    You can do it like this:

    <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  <script>
    $(function() {
      // use php code to add the options
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
      ];
      $("#tags").autocomplete({
        source: availableTags
      });
    });
  </script>
</head>

<body>
  <p>The UI Widget</p>
  <form>
    <div class="ui-widget">
      <label for="tags">Tags: </label>
      <input id="tags">
    </div>
  </form>

</body>

</html>

    Then, just type "ja" and java and javascript should appear below as options.
    Use some php code to get the list of options.
    You can then use bootstrap or php to make sure they typed a valid product.
    Bootstrapv Validation

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search