I am working on a web application. I currently have two select dropdowns which a
ID: 3849068 • Letter: I
Question
I am working on a web application. I currently have two select dropdowns which are titled environment and region. I'd like to take their selected values and run a http GET request. I'd take the result of the get request to fill out a third dropdown called versions. The environment and region selected should modify the GET request which should automatically prepopulate the versions dropdown. I'd like to modify this url "https://datastore.example-domain.com/mycatalog/"+(Environemnt chosen)+"/"+(Region chosen). This should yield something like get https://datastore.example-domain.com/mycatalog/evironemnt/region. I don't have any experience with get requests so I'm wondering how to get this result then populate a dropdown with it. The return result should be something like a list of [1,2,3,4,5,6]. This is the code I have so far.
<!-- Select Basic -->
<div name="env" class="form-group">
<label class="col-md-4 control-label">Environment</label>
<div class="col-md-4">
<select id="env" name="env" class="form-control" id="env">
<option value="Development">Development</option>
<option value="SIT">SIT</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div name="region" class="form-group">
<label class="col-md-4 control-label">Region</label>
<div class="col-md-4">
<select id="region" class="form-control" id="region">
<option value="North America">North America</option>
<option value="Eastern Europe">Eastern Europe</option>
<option value="Middle East">Middle East</option>
</select>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("env").value;
}
function myFunction2(){
var y= document.getElementById("region").value;
}
}
</script>
<!-- Select Basic -->
<div name="version" class="form-group">
<label class="col-md-4 control-label">Version</label>
<div class="col-md-2">
<select id="version" name="version" class="form-control" id="version">
</select>
</div>
</div>
<div id="version">
Explanation / Answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="JavaScript">
<meta name="author" content="Shivam">
<title>1</title>
</head>
<body>
<!-- Select Basic -->
<div name="env" class="form-group">
<label class="col-md-4 control-label">Environment</label>
<div class="col-md-4">
<select id="env" name="env" class="form-control" id="env">
<option value="">!! Select Environment !!</option>
<option value="Development">Development</option>
<option value="SIT">SIT</option>
<option value="Production">Production</option>
</select>
</div>
</div>
<!-- Select Basic -->
<div name="region" class="form-group">
<label class="col-md-4 control-label">Region</label>
<div class="col-md-4">
<select id="region" class="form-control" id="region">
<option value="">!! Select Region !!</option>
<option value="North America">North America</option>
<option value="Eastern Europe">Eastern Europe</option>
<option value="Middle East">Middle East</option>
</select>
</div>
</div>
<script>
function myFunction(v,x) {
// v has the select tag and x has the current url
var l=x.split('/');
var n=l.length;
if(l[n-1]!="mycatalog")
return;
x=x+'/'+v.value;
window.history.replaceState(' ',' ',x);
}
function myFunction2(v,env,x){
// v has the region select tag, env has the envirnment select tag and x has the current url
var l=x.split('/');
var n=l.length;
if(l[n-1]!=env.value)
return;
x=x+'/'+v.value;
window.history.replaceState(' ',' ',x);
// adding the values to the version tag
var opt;
var i=1;
var ver=document.getElementById("version");
while(i<=6){
opt=document.createElement("option");
opt.value=i;
opt.text=i;
ver.options.add(opt);
i++;
}
}
</script>
<!-- Select Basic -->
<div name="version" class="form-group">
<label class="col-md-4 control-label">Version</label>
<div class="col-md-2">
<select id="version" name="version" class="form-control" id="version">
</select>
</div>
</div>
<div id="version">
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.