Using Jquery chosen in jquery ajax

Question

I am using jquery chosen and calling ajax on change drop down but records are not displaying. This code which I am using after changing drop down.

    $.ajax({
        type: "POST",
        url: "MY URL",
        data: {
            sno: $(this).val()
        },

        success: function (resp) {
            var resp = jQuery.parseJSON(resp);
            if (resp.length == 0) {
                $("#site").html('<option value="0" selected>Select Site</option>');

            } else {
                $.each(resp, function (i, item) {
                    $('#site').append($('<option>', {
                        value: item.siteNameID + '-' + item.siteName,
                        text: item.siteName
                    }));
                });
            }
        },
        error: function (resp) {

            console.log('error');
        }
    });

One thing I have noticed jquery chosen applying on my select box but data which I am fetching from server side is not adding in that select box

Nate32 · Accepted Answer · 2016-03-06 03:29:34Z

1

You will need to call the chosen update trigger after you add items to your select list dynamically in order for them to show up. Use the following line after you have appended items and they should be displayed in your list.

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

answered Mar 6, 2016 at 3:29

Nate32

2512 gold badges5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

netto · Accepted Answer · 2016-03-05 07:45:58Z

I think my code is not the answer for your question, but this mimics adding options to select... just click the add button...

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="add()">Add</button>
<select id="select"></select>
<script>
   var json = [{title:"lorem",value:1},
               {title:"john doe",value:2},
               {title:"foo",value:3},
                ];
   function add(){
   		$("#select").empty();
   		for(var x = 0; x<json.length; x++){
   			var option = '<option value="'+json[x].value+'"> '+json[x].value+'-'+json[x].title+'</option>';
   			$("#select").append($(option));
		}
   }
</script>
</body>
</html>

Collectives™ on Stack Overflow

Using Jquery chosen in jquery ajax

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related