We Keep Coding

how to call a selected select value with ajax and javascript?

I have a product update modal which is contains MainCategory, Category, SubCategory , ChildCategory . So I have script which calls other Category, SubCategory , ChildCategory with ajax when the new MainCategory selected.
But it's an update modal so when i just open the modal, there are only curreny values in those selects. But there are not other Category, SubCategory , ChildCategory values in those selects. I need those values so user can select another one.
I allready think about to call those Category, SubCategory , ChildCategory on the back-end and send it to front-end with view model but i dont wanna send lots of query to my database. Am i able to do that or not ? if i am able to do then how ?
HTML
<div class="col">
<label asp-for="#productUpdate.MainCategoryID" class="control-label">Ana Kategorisi</label>
<select asp-for="#productUpdate.MainCategoryID" class="form-control" data-width="100%" id="drpMainCatc" name="MainCategoryID" required>
#if (productUpdate.MainCategoryID != null)
{
<option value="#productUpdate.MainCategoryID" selected disabled hidden>#productUpdate.MainCategory.MainCategoryName</option>
#foreach (var mainCategory in Model.MainCategoriesForDropdownList)
{
<option value="#mainCategory.MainCategoryID">#mainCategory.MainCategoryName</option>
}
}
else
{
<option value="">Seçiniz</option>
#foreach (var mainCategory in Model.MainCategoriesForDropdownList)
{
<option value="#mainCategory.MainCategoryID">#mainCategory.MainCategoryName</option>
}
}
</select>
<span asp-validation-for="#productUpdate.MainCategoryID" class="text-danger"></span>
</div>
<div class="col">
<label asp-for="#productUpdate.CategoryID" class="control-label">Kategorisi</label>
<select asp-for="#productUpdate.CategoryID" class="form-control" data-width="100%" id="drpCatc" name="CategoryID" required>
#if (productUpdate.CategoryID != null)
{
<option selected="selected" value="#productUpdate.CategoryID">#productUpdate.Category.CategoryName</option>
}
else
{
<option value="">Seçiniz</option>
}
</select>
<span asp-validation-for="#productUpdate.CategoryID" class="text-danger"></span>
</div>
<div class="col">
<label asp-for="#productUpdate.SubCategoryID" class="control-label">Alt Kategorisi</label>
<select asp-for="#productUpdate.SubCategoryID" class="form-control" data-width="100%" id="drpSubCatc" name="SubCategoryID" required>
#if (productUpdate.SubCategoryID != null)
{
<option selected="selected" value="#productUpdate.SubCategoryID">#productUpdate.SubCategory.SubCategoryName</option>
}
else
{
<option value="">Seçiniz</option>
}
</select>
<span asp-validation-for="#productUpdate.SubCategoryID" class="text-danger"></span>
</div>
<div class="col">
<label asp-for="#productUpdate.ChildCategoryID" class="control-label">2.Alt Kategorisi</label>
<select asp-for="#productUpdate.ChildCategoryID" class="form-control" data-width="100%" id="drpChildCatc" name="ChildCategoryID" required>
#if (productUpdate.ChildCategoryID != null)
{
<option selected="selected" value="#productUpdate.ChildCategoryID">#productUpdate.ChildCategory.ChildCategoryName</option>
}
else
{
<option value="">Seçiniz</option>
}
</select>
<span asp-validation-for="#productUpdate.ChildCategoryID" class="text-danger"></span>
</div>
And Javascript with Ajax Call :
<script>
$("#drpMainCatc").change(function () {
var self = $(this);
var catItems = "";
$.ajax({
url: '/Company/GetCategories/?id=' + self.val(),
type: "GET",
dataType: "json",
success: function (data) {
catItems += "<option value='" + "0" + "' disabled selected >" + "Seçiniz" + "</option>";
$.each(data, function (index, item) {
catItems += "<option value='" + item.categoryID + "'>" + item.categoryName + "</option>";
});
$("#drpCatc").html(catItems);
$("#drpCatc").val($('#categoryID').val());
console.log($("#drpCatc").val($('#categoryID').val()));
},
error: function (xhr, ajaxOptions, thrownError) {
showError('Kategoriler yüklenirken hata oluştu, tekrar deneyiniz.')
}
});
$("#drpSubCatc").empty();
$("#drpChildCatc").empty();
});
$("#drpCatc").change(function () {
var self = $(this);
var subCatItems = "";
$.ajax({
url: '/Company/GetSubCategories/?id=' + self.val(),
type: "GET",
dataType: "json",
success: function (data) {
subCatItems += "<option value='" + "0" + "' disabled selected >" + "Seçiniz" + "</option>";
$.each(data, function (index, item) {
subCatItems += "<option value='" + item.subCategoryID + "'>" + item.subCategoryName + "</option>";
});
$("#drpSubCatc").html(subCatItems);
$("#drpSubCatc").val($('#subCategoryID').val());
},
error: function (xhr, ajaxOptions, thrownError) {
showError('1. Alt Kategoriler yüklenirken hata oluştu, tekrar deneyiniz.')
},
}); $("#drpChildCatc").empty();
});
$("#drpSubCatc").change(function () {
var self = $(this);
var childCatItems = "";
$.ajax({
url: '/Company/GetChildCategories/?id=' + self.val(),
type: "GET",
dataType: "json",
success: function (data) {
childCatItems += "<option value='" + "0" + "' disabled selected >" + "Seçiniz" + "</option>";
$.each(data, function (index, item) {
childCatItems += "<option value='" + item.childCategoryID + "'>" + item.childCategoryName + "</option>";
});
$("#drpChildCatc").html(childCatItems);
$("#drpChildCatc").val($('#childCategoryID').val());
},
error: function (xhr, ajaxOptions, thrownError) {
showError('2. Alt Kategoriler yüklenirken hata oluştu, tekrar deneyiniz.')
},
});
});
</script>

Why when i debug my value option tag html is undefined?

I've tried debugging the following error for several hours with no solution JS is still undefined but id parameter in controller has a value. Please help. I need it.
This html code when i debug, the value is undefined, why the value is undefined?
<select id="cmbTipe" class="form-control">
<option value="-1">Select Jenis</option>
<option value="undefined">undefined</option>
<option value="undefined">undefined</option>
</select>
My Controller
namespace PerhitunganKeuntunganParkir.Controllers{
public class ParkirController : Controller
{
private readonly JenisKendaraanRepository _jeniskendaraanRepository = null;
private readonly TipeKendaraanRepository _tipekendaraanRepository = null;
private readonly ParkirContext _context = null;
//Dependency Injection
public ParkirController(JenisKendaraanRepository jenisKendaraanRepository, TipeKendaraanRepository tipeKendaraanRepository, ParkirContext context)
{
_jeniskendaraanRepository = jenisKendaraanRepository;
_tipekendaraanRepository = tipeKendaraanRepository;
_context = context;
}
public async Task<ViewResult> GetAllJenis()
{
ViewBag.Jenis = await _jeniskendaraanRepository.GetJenisKendaraan();
return View();
}
public IActionResult LoadTipeC(int jenisId)
{
return Json(_context.TipeKendaraan.Where(s=>s.JenisKendaraanId ==
jenisId).Select(s=> new TipeKendaraanModel{
Id = s.Id,
Tipe=s.Tipe
}).ToList());
}
My View
In HTML my cascading dropdown the value is undefined, why does this happen? The JavaScript is working but the value is undefined in HTML
#{
ViewData["Title"] = "Input Form";
#model JenisKendaraanModel
<div class="container">
<form method="post" asp-action="GetAllJenis" asp-controller="Parkir">
<div class="form-group">
<label asp-for="Jenis"></label>
<select id="cmbJenis" class="form-control">
<option value="-1">Select Jenis</option>
#foreach (var jenis in ViewBag.Jenis)
{
<option value="#jenis.Id">#jenis.Jenis</option>
}
</select>
<span asp-validation-for="Jenis" class="text-danger"></span>
</div>
<div class="form-group">
<select id="cmbTipe" class="form-control">
</select>
</div>
<script src="~/lib/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#cmbJenis').on('change', function () {
var jenisId = $('#cmbJenis option:selected').val();
$.ajax({
type: 'GET',
data: { jenisId: jenisId },
url: '#Url.Action("LoadTipeC","Parkir")',
success: function (result) {
//var tipe = JSON.parse(result);
var s = '<option value="-1">Select tipe</option>';
for (var i = 0; i < result.length; i++) {
s += '<option value="' + result[i].Id + '">' + result[i].Tipe + '</option>';
}
$('#cmbTipe').html(s);
}
});
});
});
</script>
</form>
</div>

After my test, I found that your problem may lie in your Js.
Try to change your code:
for (var i = 0; i < result.length; i++)
{
s += '<option value="' + result[i].Id + '">' + result[i].Tipe + '</option>';
}
To
for (var i = 0; i < result.length; i++)
{
s += '<option value="' + result[i].id + '">' + result[i].tipe + '</option>';
}
id and tipe the first letter should be lowercase.

Getting the Target Value from a Form Stored as JS Variable

I'm trying to let the user select a value from a dropdown selector, which in turn will conditionally load a second dropdown selector. Once both fields have a value, a link will appear that has been dynamically generated from those two values.
For example: User selects "audi" from first form, which shows the audi form, then they select "r8" from the second form, which would produce www.example.com/**audi**/**r8**/
However, it seems that I can't get the event.target.value of the second dropdown; I'm assuming because when the script loads the value isn't there.
How would I go about writing this so I could get both values, then fill it into a link?
<form>
<select name="cars" id="cars">
<option value="" disabled selected>Select your Car</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
</form>
<br><br>
<div class="model-field" id="model-field"></div>
<div class="button-field">
<h4>link:</h4>
<p id="button-field"></p>
</div>
<script>
var audiForm = '<form class="audi-model">' +
'<select name="audi-model" id="audi-model">' +
'<option value="" disabled selected>Select Audi model</option>' +
'<option value="a4">A4</option>' +
'<option value="a5">A5</option>' +
'<option value="r8">r8</option>' +
'</select>' +
'</form>';
var vwForm = '<form class="vw-model">' +
'<select name="vw-model" id="vw-model">' +
'<option value="" disabled selected>Select VW model</option>' +
'<option value="jetta">Jetta</option>' +
'<option value="passat">Passat</option>' +
'</select>' +
'</form>';
var carsForm = document.getElementById("cars");
if (carsForm) carsForm.addEventListener('change', function(event) {
var carType = (event.target.value);
console.log(carType);
if(event.target.value == 'audi') {
document.getElementById("model-field").innerHTML = audiForm;
}
if(event.target.value == 'volkswagen') {
document.getElementById("model-field").innerHTML = vwForm;
}
});
var audiModelForm = document.getElementById("audi-model");
if (audiModelForm) audiModelForm.addEventListener('change', function(event) {
var audiModel = event.target.value;
console.log(audiModel); // Doesn't work as the above line is likely null
var link = '<h4>' + carType + '/' + audiModel + '</h4>';
console.log(link);
document.getElementById("button-field").innerHTML = link;
});
var vwModelForm = document.getElementById("vw-model");
if (vwModelForm) vwModelForm.addEventListener('change', function(event) {
var vwModel = event.target.value;
console.log(vwModel); // Doesn't work as the above line is likely null
var link = '<h4>' + carType + '/' + vwModel + '</h4>';
console.log(link);
document.getElementById("button-field").innerHTML = link;
});
</script>

Another solution is to store the options in a javascript object, and just auto fill in the select as needed. This will allow you to easily update the system to accept more makes and models.
var data = {
"audi": ["a4","a5","r8"],
"volkswagen": ["Bug","Jetta","Golf"]
};
var make = document.querySelector("#cars");
var model = document.querySelector("#model");
var link = document.querySelector("#link");
make.addEventListener("change",function(){
if(make.value != ""){
var models = data[make.value];
var length = model.options.length;
for (i = length-1; i >= 0; i--) {model.options[i] = null;}
link.innerHTML = "";
let opt= document.createElement("option");
opt.text = "Select " + make.value + " Model";
opt.value = "";
model.appendChild(opt);
models.forEach(function(k,v){
let opt= document.createElement("option");
opt.text = k;
opt.value = k;
model.appendChild(opt);
});
}
});
model.addEventListener("change",function(){
if(model.value != ""){
link.innerHTML = '<h4>' + make.value + '/' + model.value + '</h4>';
}
});
<form>
<select name="cars" id="cars">
<option value="" disabled selected>Select your Car</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
<select name="model" id="model"></select>
</form>
<div id="link">
</div>

The problem is that your code attempts to find and set up an event handler for the second dropdown before it gets created. Moving that code so that it is within the first event handler makes it work.
<form>
<select name="cars" id="cars">
<option value="" disabled selected>Select your Car</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
</form>
<br><br>
<div class="model-field" id="model-field"></div>
<div class="button-field">
<h1>link:</h1>
<p id="button-field"></p>
</div>
<script>
var audiForm = '<select name="audi-model" id="audi-model">' +
'<option value="" disabled selected>Select Audi model</option>' +
'<option value="a4">A4</option>' +
'<option value="a5">A5</option>' +
'<option value="r8">r8</option>' +
'</select>' +
'</form>';
var vwForm = '<select name="vw-model" id="vw-model">' +
'<option value="" disabled selected>Select VW model</option>' +
'<option value="jetta">Jetta</option>' +
'<option value="passat">Passat</option>' +
'</select>' +
'</form>';
var carsForm = document.getElementById("cars");
if (carsForm) carsForm.addEventListener('change', function(event) {
var carType = (event.target.value);
console.log(carType);
if(event.target.value == 'audi') {
document.getElementById("model-field").innerHTML = audiForm;
}
if(event.target.value == 'volkswagen') {
document.getElementById("model-field").innerHTML = vwForm;
}
var audiModelForm = document.getElementById("audi-model");
if (audiModelForm) {
audiModelForm.addEventListener('change', function(event) {
var audiModel = event.target.value;
console.log(audiModel);
var link = '<h4>' + carType + '/' + audiModel + '</h4>';
console.log(link);
document.getElementById("button-field").innerHTML = link;
});
}
});
var vwModelForm = document.getElementById("vw-model");
if (vwModelForm) vwModelForm.addEventListener('change', function(event) {
var vwModel = event.target.value;
console.log(vwModel); // Doesn't work as the above line is likely null
var link = '<h4>' + carType + '/' + vwModel + '</h4>';
console.log(link);
document.getElementById("button-field").innerHTML = link;
});
</script>
But really, a better solution is to have the select already statically built from the start, but just hidden. Then, you can set up its handler right away, but only populate its option elements after the first selection has been made. You'll also only need one secondary select for whatever set of option elements are relevant based on the first choice.
Also, you shouldn't be creating form elements that wrap each select. If you are going to submit this data somewhere, you just want one form around all the form elements. And, if not, you don't need a form at all.
Lastly, don't use HTML heading elements because of the size that they make your text. You can't have an h4 unless you've already got an h3. Use CSS to style your text.
var audi = '<option value="" disabled selected>Select Audi model</option>' +
'<option value="a4">A4</option>' +
'<option value="a5">A5</option>' +
'<option value="r8">r8</option>';
var vw = '<option value="" disabled selected>Select VW model</option>' +
'<option value="jetta">Jetta</option>' +
'<option value="passat">Passat</option>';
var cars = document.getElementById("cars");
var models = document.getElementById("models");
cars.addEventListener('change', function(event) {
if(event.target.value == 'audi') {
models.innerHTML = audi;
} else if(event.target.value == 'volkswagen') {
models.innerHTML = vw;
}
models.classList.remove("hidden"); // Time to show the second list
});
models.addEventListener('change', function(event) {
var link = '<h1>' + cars.value + '/' + models.value + '</h1>';
console.log(link);
document.getElementById("button-field").innerHTML = link;
});
.hidden { display:none; }
h1 { font-size:.8em;}
<form>
<select name="cars" id="cars">
<option value="" disabled selected>Select your Car</option>
<option value="audi">Audi</option>
<option value="volkswagen">Volkswagen</option>
</select>
<div class="model-field" id="model-field">
<select name="models" id="models" class="hidden"></select>
</div>
</form>
<div class="button-field">
<h1>link:</h1>
<p id="button-field"></p>
</div>

Adding OptGroups dynamically using jQuery in bootstrap-select

I'm using this bootstrap-select as my default select in my project.
Now I'm facing the problem on adding optgroup dynamically using jQuery.
My current code looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
var url = "#Url.Action("ToDoListDay", "Dropdown")";
var urlData = "#Url.Action("ToDoListData","Dropdown")";
$.get(url, function (e) {
var text_Employee = $("#ToDoList");
$.each(e, function (i, v) {
text_Employee.append($("<optgroup label=" + v.Description + ">"));
$.get(urlData, { DateParam: this.Description }, function (z) {
$.each(z, function (x, a) {
text_Employee.append($("<option data-tokens="+a.data_token+"/>").val(a.ID).text(a.value));
});
text_Employee.append($("</optgroup>"));
});
});
$('#ToDoList').selectpicker('refresh');
});
</script>
But the Select Output looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
<optgroup label="Feb" 05="" 2018="">
</optgroup>
<option data-tokens="Feb" 05="" 2018="" asd="" value="25">asd</option>
<option data-tokens="Feb" 05="" 2018="" a="" value="26">a</option>
</select>
Instead of
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true" tabindex="-98">
<optgroup label="Feb 05 2018">
<option data-tokens="Feb 05 2018 asd" value="25">asd</option>
<option data-tokens="Feb 05 2018 a" value="26">a</option>
</optgroup>
</select>
Json Response
The 1st Response (for optGroup)
[{"Description":"Feb 05 2018"}]
The 2nd Response (for options)
[
{"ID":25,"data_token":"Feb 05 2018 asd","value":"asd"},
{"ID":26,"data_token":"Feb 05 2018 a","value":"a"}
]

After a few review on my code I finally understand the logic of it and solve my problem.
First is I forgot to put ' ' on label (a basic error on my part)
text_Employee.append($("<optgroup label=" + v.Description + ">"));
that's why the result was data-tokens="Feb" 05="" 2018=""
Then second is I appended it on select instead of optGroup
Final Output looks like this
<select id="ToDoList" name="_ToDoList" class="selectpicker show-tick form-control" data-live-search="true"></select>
<script>
var url = "#Url.Action("ToDoListDay ", "Dropdown ")";
$.get(url, function(e) {
var text_Employee = $("#ToDoList");
$.each(e, function(i, v) {
console.log("Desc: " + v.Description);
OptGroup(v.value.toString(), v.Description.toString()).done(function() {
Options(v.value.toString(), v.Description.toString()).done(function() {
console.log("Done appending Group");
$('#ToDoList').selectpicker('refresh');
});
});
});
});
function OptGroup(value, Description) {
var dfrdOptGroup = $.Deferred();
var text_Employee = $("#ToDoList");
text_Employee.append($("<optgroup id='" + value + "' label='" + Description + "' >"));
console.log("1");
dfrdOptGroup.resolve();
return dfrdOptGroup.promise();
}
function Options(ID, Description) {
var dfrdOptions = $.Deferred();
var urlData = "#Url.Action("ToDoListData ","Dropdown ")";
var text_Employee = $("#" + ID + "");
$.get(urlData, {
DateParam: Description
}, function(z) {
$.each(z, function(x, a) {
console.log("2");
text_Employee.append($("<option data-tokens='" + a.data_token.toString() + "' />").val(a.ID).text(a.value));
});
dfrdOptions.resolve();
});
return dfrdOptions.promise();
}
</script>

How to open different links depending on the last selection of my dynamic form?

I am just a beginner in Web development, I mean I don't have much coding knowledge.
I'm stuck in the code regarding how to open different links depending on the last selection of my dynamic form,i.e.,the OS version.
the code is-
< script type = "text/javascript" >
$(document).ready(function() {
$(function() {
var sel, i,
list = ['mobile', 'laptop'],
phone = ['Samsung', 'Nokia'],
laptop = ['HP', 'Dell'],
android = ['4.1', '4.2'],
windows = ['8', '8.1'],
dev_default = '<option value="default" selected>Select your Device brand</option>',
os_default = '<option value="default" selected>Select your OS version</option>';
sel_brand = $('#brand');
sel_version = $('#version');
$('select').change(function() {
switch (this.id) {
case 'main_list':
$('.secondary').hide();
sel_brand.find('option').remove();
sel_brand.append(dev_default);
sel_brand.show();
if (this.value == 'mobile') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + phone[i] + '">' + phone[i] + '</option>'
);
}
} else if (this.value == 'laptop') {
for (i = 0; i < phone.length; i++) {
$("#brand").append(
'<option value="' + laptop[i] + '">' + laptop[i] + '</option>'
);
}
}
break;
case 'brand':
sel_version.find('option').remove();
sel_version.append(os_default);
sel_version.show();
if (this.value == 'Samsung') {
for (i = 0; i < android.length; i++) {
$("#version").append(
'<option value="' + android[i] + '">' + android[i] + '</option>'
);
}
} else if (this.value == 'Nokia' || this.value == 'HP' || this.value == 'Dell') {
for (i = 0; i < windows.length; i++) {
$("#version").append(
'<option value="' + windows[i] + '">' + windows[i] + '</option>'
);
}
}
break;
}
});
}); //END document.ready()</script>
<style type="text/css"> .secondary {
display: none;
}
</style>
<select id="main_list">
<option value="default" selected>Select Your List</option>
<option value="mobile">mobile list</option>
<option value="laptop">laptop list</option>
</select>
<br />
<select id="brand" class="secondary"></select>
<br />
<select id="version" class="secondary"></select>
<br />