Question

I am using JQuery Chosen to select the many tags

here is my code

                <tr>                        
                    <td>Category</td>
                        <td> 
                        <select onchange="showUser(this.value)" name="mySelect"   style="width:350px;" > 
                            <?php $result= mysql_query('SELECT DISTINCT category  FROM demo_tags'); ?> 
                            <?php while($row= mysql_fetch_assoc($result)) { ?> 
                                <option value="<?php echo htmlspecialchars($row['category']);?>"> 
                                    <?php echo htmlspecialchars($row['category']); ?> 
                                </option> 
                            <?php } ?> 
                        </select> 
                    </td>
            </tr>   




                <!-- tags workspace ----------------------- -->

                <tr>                        
                    <td>Tags</td>
                        <td id = "getit">   
                             <select id ="hi" data-placeholder="Choose a tag" class="chzn-select" multiple style="width:350px;" tabindex="4">
                                  <option value=""></option> 
                                  <option value="United States">United States</option> 
                        </select>
                    </td>
            </tr>   

                <!-- -      Tags Workspace ends  -->

In above code i have two select boxes one is for category select and second is for tags selection

tags value are depend on the value of category mean if i select a category Medical the option of the Tags would be come from database

so for i am using showUser() to make an Ajax call like

    <script>
    function showUser(val){
        alert(val);
        var dataString = 'cat='+ val;
            $.ajax
            ({
                type: "GET",
                url: "http://localhost/UI/user/taggin.php",
                data: dataString,
                cache: false,

                success: function(html)
                    {
                    alert(html);
                    $("#getit").html(html);

                    }
            });
            alert("somthing happning");
        }
    </script>

this ajax call is returning data like

<select  data-placeholder="Choose a tag" class="chzn-select" multiple style="width:350px;" tabindex="4"><option value="dentist">dentist</option></select>

now i am appending this html return to tr id getit

but the css property are not applying over database populated value

Please tell me what should i do so that i could get my database populated tags looks like Jquery chosen

Answer 1

After you modify the DOM you have to call $('.chzn-select').chosen() again to have the plugin operate on the new element.