hi, I am comparatively new to js. I have got a dynamic dependent dropdown. My blade file:
<div class="form-group">
<label>Type *</label>
<select required name="note_type" id="note_type" class="selectpicker form-control" data-live-search="true" data-live-search-style="begins" title="Select Account type...">
<option value="account_head">Account Head</option>
<option value="account_group">Group</option>
</select>
</div>
<div class="form-group">
<label>Account/Subgroup *</label>
<select name="acc_name" class="form-control selectpicker">
</select>
</div>
script:
<script type="text/javascript">
$(document).ready(function() {
$('#note_type').on('change', function() {
var note_type = $(this).val();
if(note_type) {
$.ajax({
url: "<?= url('/notes/getNote/') ?>/" + note_type,
type: "GET",
data : {"_token":"{{ csrf_token() }}"},
dataType: "json",
success:function(data)
{
if(data){
$.each(data, function(key, name){
$('select[name="acc_name"]').append('<option value="'+ name.name +'">' + name.name+ '</option>');
});
}
}
});
}
});
});
</script>
all the functions are working. console.log(name.name) is displaying all data and there are no errors. only the append part is not working. could anyone please suggest what am i doing wrong here.
If you do a console.log($('select[name="acc_name"]')); for the selector, does it show the select element?
Maybe this will be a bit more performant too:
let options = '';
$.each(data, function(key, name){
options += '<option value="'+ name.name +'">' + name.name+ '</option>';
});
$('select[name="acc_name"]').html(options);
Please or to participate in this conversation.
