title: How to modify the function below to fetch all the elements based on the selected category?
body: <p>How to modify the function below to fetch all the elements based on the selected category? I simply want to fetch and show information without having to click on a button/ submission. Please guide how this can be achieved? I am open to suggestions.</p>
  <pre><code>&lt;head&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
      &lt;script&gt;
      function getProdNames(){
          //How to alter this to fetch &amp; display all the elements from col (product_name) based on the selected category.
              var product_name = $('#category').find(':selected').data('product_name');
              
              $('#prodNames').val(product_name);
      
          }
          
      &lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p>Php:</p>
  <pre><code>&lt;body&gt;
        &lt;form&gt;
          &lt;select id=&quot;category&quot; name=&quot;category&quot; onClick=&quot;getProdNames();&gt;
                  &lt;option&gt; &lt;?php
                              // Attempt select query execution
                              $sql = &quot;SELECT * FROM TABLE1&quot;;
                              if($result = $mysqli-&gt;query($sql)){
                                  if($result-&gt;num_rows &gt; 0){
                                          while($r = $result-&gt;fetch_array()){
                                             echo &quot;&lt;option    
                                                  data-productName='$r[2]' 
                                                  data-color='$r[3]'
                                                  value='$r[1]'&gt; $r[1] &lt;/option&gt;&quot;;}
                                  } } ?&gt;
                  &lt;/option&gt;
          &lt;/select&gt;
      
      //Display Product Names based on the selected category here in the form of multi select list
      
      &lt;input name=&quot;prodNames&quot; id=&quot;prodNames&quot;  class=&quot;form-control&quot;/&gt;
          
  </code></pre>
  <p>Desired output:
  If user selects toy. This should trigger the onClick function to show all the productNames associated with this cateogory. Hence, the following output based on this example:</p>
  <pre><code>ABC
  DEF
  </code></pre>