issue while creating a dynamic dropdown box using multiselect jquery plugin

Question

I am trying to make a dynamic select dropdown, I tried writing the code in javascript and jquery both but can't append the options in the dropdown. When I tried seeing what is stored then the Html select code along with all the options is shown. What should I add or change in it so the options are stored in the correct position?

lines=["B","C","D","E","F","G"];
$(document).ready(function(){
  $("#select1").multiselect({
    placeholder: 'Features'
  });
});    

   // var selectFir = document.getElementById("select1");
      
   // for (var i = 0; i < firstLine.length; i++) {
         // var x = document.createElement("OPTION"), 
           //     txt = document.createTextNode(firstLine[i]);
          // x.appendChild(txt);
          //  x.setAttribute("value", firstLine[i]);
          //  selectFir.appendChild(x);
          //  selectFir.insertBefore(x, selectFir.lastChild);
   //  }console.log(selectFir);

firstLine = lines[0];
// Calls function to generate drop downs using options above
       for(var i=0; i< firstLine.length;i++)
       {
        //creates option tag
         jQuery('<option/>', {
               value: firstLine[i],
               html: firstLine[i]
               }).appendTo('#select1'); 
       }
       jQuery('#select1').multiselect('refresh');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiselect/2.2.9/js/multiselect.min.js"></script>
<select multiple id="select1">
 <option value="A">A</option>
</select>

Looks like you are looking forward to put code after this "// Calls function to generate drop downs using options above" in function on some click event, correct? — jagdish.narkar
– jagdish.narkar, Commented Nov 19, 2019 at 15:59
Yeah, the problem is I can see the whole select tag of html code when I display selectFir, it is not pushing the options in the options tag. Is there a jquery plugin that can populate dynamic dropdown? — shruti
– shruti, Commented Nov 19, 2019 at 17:19

jagdish.narkar · Accepted Answer · 2019-11-19 15:56:41Z

lines=["B","C","D","E","F","G"];
$(document).ready(function(){
  $("#select1").multiselect({
    placeholder: 'Features'
  });
});    

   // var selectFir = document.getElementById("select1");
      
   // for (var i = 0; i < firstLine.length; i++) {
         // var x = document.createElement("OPTION"), 
           //     txt = document.createTextNode(firstLine[i]);
          // x.appendChild(txt);
          //  x.setAttribute("value", firstLine[i]);
          //  selectFir.appendChild(x);
          //  selectFir.insertBefore(x, selectFir.lastChild);
   //  }console.log(selectFir);

firstLine = lines;
// Calls function to generate drop downs using options above
       for(var i=0; i< firstLine .length;i++)
       {
        //creates option tag
         jQuery('<option/>', {
               value: firstLine[i],
               html: firstLine[i]
               }).appendTo('#select1'); 
       }
       jQuery('#select1').multiselect('refresh');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/multiselect/2.2.9/js/multiselect.min.js"></script>
<select multiple id="select1">
 <option value="A">A</option>
</select>

Collectives™ on Stack Overflow

issue while creating a dynamic dropdown box using multiselect jquery plugin

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related