After ajax calling I want to add and remove the option after the first option using jquery. I have to fetch some data from the database by ajax, here I want to put return value to remove select options. I want to set remove the option after the first child of select field.
How can I do it?
HTML:
<select name="product_sub_category" id="product_sub_category"> <option value="">------ Select ------</option> <option value="1"> Value 1</option> <option value="2"> Value 2</option> <option value="3"> Value 3</option> </select>
Ajax:
<script> $.ajax({ type:'post', url:'get_data.php', data:{variable:value}, success:function(res){ var SubCategoryData=""; for(var i=0; i< res.data.length; i++) { SubCategoryData+='<option value="'+res.data[i]['id']+'">'+res.data[i]['sub_category_name']+'</option>'; } $('#product_sub_category option:first-child').after(SubCategoryData); } }); </script>
Apply it:
$('#product_sub_category').children('option:not(:first)').remove();
For example:
<script> $('#product_sub_category').children('option:not(:first)').remove(); ar SubCategoryData=""; for(var i=0; i< res.data.length; i++) { SubCategoryData+='<option value="'+res.data[i]['id']+'">'+res.data[i]['sub_category_name']+'</option>'; } $('#product_sub_category option:first-child').after(SubCategoryData); </script>
Question and answer is powered by AnsPress.io