Multiselect plugin jquery not working with javascript

Question

I have been using multiselect API for the dropdown of multiple Select.

---

My HTML :

<select id="options" multiple="multiple"></select>

My JS :

render:function(){
    // $('#viewTemp').html(octopus.getQuestions()[0]);
    // console.log(questions);
    var htmlStr = '';
    for (var i = 0; i < tags.length; i++) {
        htmlStr += "<option value="+(i+1)+">"+tags[i]+"</option>"
    };        
    //console.log(htmlStr);
    $(".options").html(htmlStr);
}

---

This isn't working. however whenever I do this ...

<select id="options" multiple="multiple">
    <option value="1">JavaScript</option>
    <option value="2">CSS</option>
    <option value="3">HTML</option>
    <option value="4">C</option>
</select>

... it does work!

Everything else (adding multiselect plugin etc.), I have done same as multiselect plugin

Thanks in advance.

Answer 1

Instead of class selector in $(".options").html(htmlStr); you should use id selector $("#options").html(htmlStr); , because you don't have any class with name options but you have the id='options' .

Answer 2

You're missing some quotation (and semicolon at the end) in this line:

htmlStr += "<option value="+(i+1)+">"+tags[i]+"</option>"

It should be:

htmlStr += "<option value=\""+(i+1)+"\">"+tags[i]+"</option>";