After selecting an option from mod_accs_Role_ID, how can I display the corresponding data stored in the database based on that selection? For example, if I select 1 in mod_accs_Role_ID, then the role_Name 'Hello' should be displayed.
<div class="col-sm-6 form-group">
<label for="mod_accs_Role_ID" class="col-form-label">Role
<span class="text-danger">*</span>
</label>
<select class="form-control" name="mod_accs_Role_ID" v-model="selected" v-on:change="onChange">
<option value="">Select Role</option>
<option v-for="item in sel_role" :value="item.role_id">{{item.role_Display}}</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label for="role_Name" class="col-form-label">Role Action
<span class="text-danger">*</span>
</label>
<select class="form-control not-editable" name="role_Name" disabled>{{selected}}</select>
</div>
JS
var vm = new Vue({
el: '#maint_module_ctrl',
data: {
list_MyInfo: [],
sel_role: [],
selected:""
},
created: function () {
this.doList();
},
mounted: function () {
$(".bt-table").bootstrapTable();
var dropdownMenu;
$('.bt-table').on('show.bs.dropdown', function (e) {
dropdownMenu = $(e.target).find('.dropdown-menu');
$('body').append(dropdownMenu.detach());
var eOffset = $(e.target).offset();
dropdownMenu.css({
'display': 'block',
'top': eOffset.top + $(e.target).outerHeight(),
'left': eOffset.left
});
});
$('.bt-table').on('hide.bs.dropdown', function (e) {
$(e.target).append(dropdownMenu.detach());
dropdownMenu.hide();
});
},
methods: {
onChange: function () {
var self = this
ajaxJsonProcess("get", apiPath + "/param/role-dropdown", "", function (inDat) {
self.sel_role = inDat;
}, dftError);
},
The On Change function is not receiving any value