CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menujquery-chosen
Haseeb
Haseeb

Reputation: 21

jQuery Chosen Not Work If Add Dynamically

I am adding new row dynamically through javascript, having jQuery chosen dropdown and textboxes. The textboxes are fine, however, the newly added dropdown in a row is not working (even not clickable). If I use simple html dropdown then it will work fine. Please help...

HTML

<table id="POITable" border="1" width="100%">
<select data-placeholder="Select Product" id="productsList" class="chosen-select" style="width:200px;" tabindex="2" onchange="getProductName();">
            <option value=""></option>
            <option value="Test1">Test 1</option>
            <option value="Test2">Test 2</option>
            </select>
                </td>
           <td><input size=25 type="text" id="latbox"/></td>
        <td><input size=25 type="text" id="lngbox" /></td>
        <td><input type="button" id="delPOIbutton" value="Delete" onclick="deleteRow(this)"/></td>
        <td><input type="button" id="addmorePOIbutton" value="Add" onclick="insRow()"/></td>
        </tr>
 </table>

Javascript

function insRow()
{
    var x=document.getElementById('POITable');
    var new_row = x.rows[1].cloneNode(true);
    var len = x.rows.length;
    new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('select')[0];
    inp1.id += len;
    inp1.value = '';
    var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
    inp2.id += len;
    inp2.value = '';
    var inp3 = new_row.cells[3].getElementsByTagName('input')[0];
    inp3.id += len;
    inp3.value = '';

    x.appendChild( new_row );
}

Upvotes: 0

Views: 1985

Answers (2)

Sujeet Kumar
Sujeet Kumar

Reputation: 1320

Its a CSS issue, just add this code snippet in your script 

$(".chosen-container").css("min-width","220px");

Upvotes: 0

Ashantyk
Ashantyk

Reputation: 31

have you tried firing the "chosen:updated" event:

$('#productsList').trigger("chosen:updated");

after adding the new options to the select?

Later edit: if you're using an older version of chosen, the event might be called "liszt:updated"

Upvotes: 1

Related Questions