title: Auto populate Dropdown
body: <p>The issue is when I select a department its shows users names in a single line with a coma I want to show users in the dropdown like when user select department and designation then user show in dropdown I have 3 table departments, designation and users, department and designation are foreign key in users</p>
  <pre><code> ```  department dropdown  ```
                                      &lt;label&gt;User Department&lt;/label&gt;
                                      &lt;select onchange=&quot;changeDep();&quot; name=&quot;fwd_department&quot; id=&quot;dep_id&quot; required=&quot;&quot; class=&quot;form-control department_name &quot; style=&quot;width: 100%;&quot;&gt;
                                          &lt;option value=&quot;0&quot; selected=&quot;true&quot; disabled=&quot;true&quot;&gt;Select Department&lt;/option&gt;
                                          @foreach($department as $dep)
                                          &lt;option value=&quot;{{ $dep-&gt;id }}&quot; &gt;{{ $dep-&gt;name }}&lt;/option&gt;
                                          @endforeach
                                      &lt;/select&gt;
    ```   designation dropdown    ```     
                              
                                      &lt;label&gt;User Designation&lt;/label&gt;
                                      &lt;select onchange=&quot;changeDesi();&quot; name=&quot;fwd_designation&quot; id=&quot;desi_id&quot; required=&quot;&quot; class=&quot;form-control department_name &quot; style=&quot;width: 100%;&quot;&gt;
                                          &lt;option value=&quot;0&quot; selected=&quot;true&quot; disabled=&quot;true&quot;&gt;Select Department&lt;/option&gt;
                                          @foreach($designation as $desi)
                                          &lt;option value=&quot;{{ $desi-&gt;id }}&quot; &gt;{{ $desi-&gt;name }}&lt;/option&gt;
                                          @endforeach
                                      &lt;/select&gt;
   ```    users dropdown    ```                               
                                      &lt;label&gt;User Name&lt;/label&gt;
                                      &lt;select name=&quot;name&quot;  required=&quot;&quot; class=&quot;form-control department_name &quot; style=&quot;width: 100%;&quot;&gt;
                                          &lt;option value=&quot;0&quot; id=&quot;us_id&quot; selected=&quot;&quot; disabled=&quot;&quot;&gt;Select user&lt;/option&gt;    
                                      &lt;/select&gt;
         ```      Java Script code ```
                   &lt;script&gt;
                      var selectedValue=&quot;&quot;;
                      var selectedValue2=&quot;&quot;;
                      var arr = @json($user);
                      function changeDep() {
                          var selectBox = document.getElementById(&quot;dep_id&quot;);
                          selectedValue = selectBox.options[selectBox.selectedIndex].value;
                   
                          if(selectedValue2){
                              filterData = arr.filter(f =&gt; f.designation_id == selectedValue2 &amp;&amp; 
                              f.department_id == selectedValue)
                          }else{
                              filterData = arr.filter(f =&gt; f.department_id == selectedValue)
                          }
                  
                          let arrPush = [];
                          filterData.map(m =&gt; {
                              arrPush.push(m.name)
                              return m;
                          })
                          document.getElementById(&quot;us_id&quot;).innerHTML = arrPush;
                      }
                  
                      function changeDesi() {
                          var selectBox = document.getElementById(&quot;desi_id&quot;);
                          var selectedValue2 = selectBox.options[selectBox.selectedIndex].value;
                          if(selectedValue){
                              filterData = arr.filter(f =&gt; f.designation_id == selectedValue2 &amp;&amp; 
                              f.department_id == selectedValue)
                          }else{
                              filterData = arr.filter(f =&gt; f.designation_id == selectedValue2 )
                          }
                          let arrPush = [];
                          filterData.map(m =&gt; {
                              arrPush.push(m.name)
                              return m;
                          })
                          document.getElementById(&quot;us_id&quot;).innerHTML = arrPush;
                      }
                      &lt;/script&gt;
          
          [disply page][1]
          
            [1]: https://i.stack.imgur.com/V2sKF.png
  
   ```I have no idea how to DO THIS Thanks in advance ```
  </code></pre>