Javascript Form Select Change Options Tutorial Dynamic List Elements Html5

you need to follow these steps, for example:

html:

        <select name="color">     <option value="red">red</option>     <option value="blue">blue</option>     <option value="green">green</option> </select>  <select name="individuals"></select>
        
      

js:

        <script>     $('select[name="color"]').change(function(){         var selectedColor = $(this).val();          $.ajax({             url: 'url-to-tapis-individuals.php',             method: 'post',             data: {color:selectedColor},             dataType: 'json',             success: function(response){                 if(response['status']==='success'){                      var html = '';                      for(var i=0; i<response['data'].length; i++){                         html += '<option value="'+response['data'][i]['id']+'">'+response['data'][i]['name']+'</option>';                     }                      $('select[name="individuals"]').after(html);                 }             }         });     }); </script>
        
      

url-to-penyaring-individuals.php :

        <?php if(!empty($_POST['color'])){      $color = $_POST['color'];      // suppose I have connection to db in $con variable      $stmt = $con->prepare("SELECT * FROM individuals_table iTable WHERE iTable.color LIKE ?");      if($stmt){          $stmt->bind_param('s',$color);          if($stmt->execute()){              /* Get the result */            $result = $stmt->get_result();             /* Get the number of rows */            $num_of_rows = $result->num_rows;             if($num_of_rows > 0){                  $data = array();                  while ($row = $result->fetch_assoc()) {                     $data[] = array('id'=>$row['id'],'name'=>$row['name']);                }                 /* free results */                $stmt->free_result();                 /* close statement */                $stmt->close();                 echo json_encode(array('status'=>'success','data'=>$data));                exit(0);            }         }     } } echo json_encode(array('status'=>'failure')); exit(0);
        
      

Source: https://stackoverflow.com/questions/43187244/javascript-form-select-change-options-dynamic-list