Please help me to fix this. The issue is when i select Bangalore and choose any name from 2nd level select and click on button than result is fine, now without refreshing page i choose Hyderabad and a value from 2nd level select and click on button it is still showing value from Bangalore's 2nd level value in alert.
Code:
<div class="Banglore">
<select class="second-level-select" id="start_1">
<option value="">-Select Your Area-</option>
<option value="Mettuguda">Mettuguda</option>
<option value="Lingampally">Lingampally</option>
</select>
</div>
<div class="Hydrabad" >
<select class="second-level-select" id="start_2">
<option value="">-Select Your Area-</option>
<option value="A F Hospital">A F Hospital</option>
<option value="Abbur">Abbur</option>
</select>
Script:
function startAjax() {
var a1 = $("#start_1").val();
var a2 = $("#start_2").val();
if(a1 != ''){
var b = a1;
}else{
var b = a2;
}
alert(b);
}
$(document).ready(function() {
$('#Rank').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if somethings' selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
for more detail: http://jsfiddle.net/72pbbsfy/2/
Thanks for help!
window.startAjax = function() {
var rank = $("#Rank").val();
var a1 = $("#start_1").val();
var a2 = $("#start_2").val();
var b;
if (rank === 'Banglore') {
b = a1;
} else if (rank === 'Hydrabad') {
b = a2;
} else {
b = 'not selected'
}
alert(b);
}
Related
I am having an issue with an event listener on a select and a value not updating but cannot figure out what the issue.
Code is below. Basically need the price field to update based on the function above it. Unfortunately i cannot have them all in the same function and need to have them separate. The first console.log does show the value for y but the second does not show the value for price.
var factors = function factor(j) {
var mySelect = document.getElementById("mySelect").value;
if (mySelect == "car") {
lease = "166";
} else if (mySelect == "truck") {
lease = "200";
}
console.log("this is my lease value - " + lease);
return lease * j;
};
var monthlyprice = function monthlyprice() {
var price = factors(1);
console.log("this is my price -" + price);
};
var type = document.getElementById("mySelect");
type.addEventListener("click", factors);
<form action="">
<label for="mySelect">Shipment Type</label>
<select id="mySelect">
<option value="car">Car</option>
<option value="truck">Truck</option>
</select>
</form>
since monthlyprice calls factor() you want to place the listener on monthlyprice
var type = document.getElementById("mySelect");
type.addEventListener("change", monthlyprice);
function monthlyprice() {
var price = factor(1)
console.log("this is my price =" + price);
};
function factor(j) {
var y;
var z = document.getElementById("mySelect").value;
if (z == "car") {
y = "166";
} else if (z == "truck") {
y = "200";
}
console.log("this is my y value - " + y);
return y * j;
};
<form action="">
<label id="label">Shipment Type</label>
<select id="mySelect">
<option value="car">Car</option>
<option value="truck">Truck</option>
</select>
</form>
I have tow drop downs as below.
<select id="checkOwner" multiple="multiple" onchange="copyValue1(this)">
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
<select id="checkMember" multiple="multiple" onchange="copyValue2(this)>
<option value="FirstName">First Name</option>
<option value="SecondName">Last Name</option>
</select>
I have below javascript to print selected multiple values from dropdowns.
function copyValue() {
var str = "";
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
function copyValue2() {
var str = "";
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
str+= option.value+" ";
}
document.getElementById('mytextbox').value = str;
}
}
The problem is when I select values from first that value print in text box. But I select value from second dropdown First printed values disappeared and second dropdown box values are printed. But I want to keep all and when I untick I want to remove this value also. How can I do this.
If you accepting duplicate values then, this is the solution:
I updated your HTML code to suit your needs by adding real values to your dropdown lists instead of using "FirstName,LastName".
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<select id="checkOwner" multiple="multiple" onchange="copyValue()">
<option value="John">John</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<select id="checkMember" multiple="multiple" onchange="copyValue2()">
<option value="Doe">Doe</option>
<option value="Trump">Trump</option>
<option value="Abeer">Abeer</option>
</select>
<br>
<input type="text" name="mytextbox" id="mytextbox" size="200">
</body>
<script type="text/javascript">
function getOld(currentSelect)
{
var x = [];
for (var option of document.getElementById(currentSelect).options) {
if (option.selected) {
x.push(option.value);
}
}
return x;
}
function copyValue() {
x = getOld('checkMember');
y = [];
for (var option of document.getElementById('checkOwner').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
function copyValue2() {
x = getOld('checkOwner');
y = [];
for (var option of document.getElementById('checkMember').options) {
if (option.selected) {
y.push(option.value);
}
else
{
y = y.filter(value => value != option.value );
}
}
x = x.concat(y);
document.getElementById('mytextbox').value = x.join(' ');
}
</script>
</html>
I'm trying to generate an automatic email address, based on user change.
The point is to print the domain name, the rest is working fine.
here is my issue, I'm getting the element ID, if the element ID the Var x takes the values of an other var depending on the selection however, X keeps undefined.
I think that somehow it doesn't detect when I select an other option.
Any kind of help will be much appreciated.
<select name="select" id="selecto">
<option value="">--Please choose an option--</option>
<option value="value1" id="1">SEE</option>
<option value="value2" id = "2">Guillebert</option>
<option value="value3" id = "3">Saelen</option>
<option value="value4" id ="4">SEE Produktion</option>
<option value="value5" id ="5">TS-Industrie</option>
<option value="value6" id="6">Schliesing</option>
</select>
<script type="text/javascript">
var a = "#groupesee.com";
var b = "#guillebert.fr";
var c = "#saelen.fr";
var d = "#see-produktion.net;"
var e = "#ts-industrie.de";
var g = "#schliesing.net";
var x;
if(document.getElementById('selecto').value == "value1") {
x = a;
alert("Success");
}
</script>
For some reason, and I do not understand why, the var x, is keeping null even if I select the value1 in my form.
<script>
$("#field1, #field2").keyup(function(){
update();
});
function update() {
$("#result").val($('#field1').val().substr(0,1).toLowerCase() + $('#field2').val().toLowerCase()+x);
}
</script>
Result
Your code just runs as it loads. It only checks the value of the select element once (as the page loads and the script element is executed).
If you want it to run every time the select element is changed, then you need to say so.
Put your code in a function
Find the select element in the DOM
Listen for the value to change and call the function
Here is the fix, using the in the Update function. :) Tyvm #Quentin
function update() {
var a = "#groupesee.com";
var b = "#guillebert.fr";
var c = "#saelen.fr";
var d = "#see-produktion.net;"
var e = "#ts-industrie.de";
var g = "#schliesing.net";
var x;
var elt = document.getElementById(selecto);
if(document.getElementById('selecto').value == "value1") {
x = a;
} if(document.getElementById('selecto').value == "value2") {
x = b;
}
if(document.getElementById('selecto').value == "value3") {
x = c;
}
if(document.getElementById('selecto').value == "value4") {
x = c;
}
if(document.getElementById('selecto').value == "value5") {
x = c;
}
if(document.getElementById('selecto').value == "value6") {
x = c;
}
$("#result").val($('#field1').val().substr(0,1).toLowerCase() + $('#field2').val().toLowerCase()+x);
}
I have two fields customer category and customer type,
when I select one element in customer category , I need to display only a set of elements from customer type in the drop down and rest should not appear.
how do write it in javascript. Here is the one I tried but it doesnot yield proper result.
var custcategory = document.getElementById("custcatid");
var custtypes = document.getElementById('custtypeid').options;
alert('yes');
var n = custtypes.length;
var allowedtype;
if (custcategory.options[custcategory.selectedIndex].value == "ANALOGUE") {
alert('ANALOGUE');
allowedtype = 'CATV,CATV RURAL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "COMMERCIAL") {
alert('COMMERCIAL');
allowedtype = ' ,3ST HOTEL,4ST HOTEL,5ST HOTEL';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DAS") {
alert('DAS');
allowedtype = ' ,DAS PHASE1,DAS PHASE2,DAS PHASE3,DAS PHASE4';
}
else if (custcategory.options[custcategory.selectedIndex].value == "DTH") {
alert('DTH');
allowedtype = ' ,DTH';
}
var idx = 0;
for (var i = 0; i < n; i++) {
var type = custtypes[i].value;
var found = allowedtype.search(type);
if (found <= 0) {
custtypes[i].style.display = 'none';
}
else if (idx == 0) {
idx = 1;
document.getElementById('ctl00_uxPgCPH_custtype').selectedIndex = i;
}
}
alert('Done..!');
If I understand correctly, you are trying to filter a second select element based on what is selected in the first select element?
If so I put together the following snippet which might help you out. It can be probably be optimised further but it should help to get you started I feel.
(function () {
var CLASSES = {
categories: '.select__category',
types : '.select__types'
},
map = {
ANALOGUE: [
'CATV',
'CATV RURAL'
],
COMMERCIAL: [
'3ST HOTEL',
'4ST HOTEL',
'5ST HOTEL'
],
DAS: [
'DAS PHASE 1',
'DAS PHASE 2',
'DAS PHASE 3'
]
},
categorySelect = document.querySelector(CLASSES.categories),
typeSelect = document.querySelector(CLASSES.types),
filterTypes = function(val) {
// Based on a value filter the types select.
var opts = typeSelect.options,
allowedOpts = map[val];
typeSelect.value = allowedOpts[0];
for(var i = 0; i < opts.length; i++) {
if (allowedOpts.indexOf(opts[i].value) === -1) {
opts[i].hidden = true;
} else {
opts[i].hidden = false;
}
}
};
filterTypes(categorySelect.value);
categorySelect.addEventListener('change', function(e) {
filterTypes(this.value);
});
}());
<!DOCTYPE html>
<head></head>
<body>
<select id="categories" class="select__category">
<option value="ANALOGUE">Analogue</option>
<option value="COMMERCIAL">Commercial</option>
<option value="DAS">Das</option>
</select>
<select id="types" class="select__types">
<option value="CATV">Catv</option>
<option value="CATV RURAL">Catv Rural</option>
<option value="3ST HOTEL">3st Hotel</option>
<option value="4ST HOTEL">4st Hotel</option>
<option value="5ST HOTEL">5st Hotel</option>
<option value="DAS PHASE 1">Das Phase 1</option>
<option value="DAS PHASE 2">Das Phase 2</option>
<option value="DAS PHASE 3">Das Phase 3</option>
</select>
</body>
If you run the snippet, you'll see that making changes to the first will update the second select accordingly based on the defined map.
Hope this can help you out!
I need to create a menu of regions hat display two lists: a <select> for the region and another <select> for the available municipalities of that region. For this, I have a <form> and I update the municipalities through JavaScript. I have problems assigning the municipalities as <option>s of the second <select>. The option matrix of the menu doesn't accept the assignment of the values.
Here's the code.
HTML.
<html>
<head>
<title>
Página menú principal.
</title>
<?!= incluirArchivo('ArchivoJS'); ?>
</head>
<body onLoad = "preparar();">
<form id="formularioConductor" name="formularioConductor" method="post" enctype="multipart/form-data" autocomplete = "on">
<select name="menuDepartamento" id="menuDepartamento" tabindex="2" accesskey="e" onChange="municipiosDepartamento();">
<option value="x" selected="selected">ELIJA UN DEPARTAMENTO</option>
<option value="0">Antioquia</option>
<option value="1">Atlántico</option>
</select>
<select name="menuMunicipios" id="menuMunicipios" tabindex="3" disabled>
<option value=0>TODOS LOS MUNICIPIOS</option>
</select>
</form>
</body>
</html>
Javascript code:
<script lenguage="javascript">
function preparar() {
document.forms[0].elements.numeroLicencia.focus();
document.forms[0].elements.nombreConductor.disabled = true;
document.forms[0].elements.botonEnviar.disabled = true;
document.forms[0].elements.botonActualizar.disabled = true;
}
function municipiosDepartamento() {
var arregloMunicipiosDepartamento = new Array();
var posicionMunicipio = document.forms[0].elements.menuDepartamento.value;
arregloMunicipiosDepartamento = municipiosColombia(posicionMunicipio);
if(document.forms[0].elements.menuMunicipios.options.length > 1){
var totalMunicipios = document.forms[0].elements.menuMunicipios.length;
for (var i = 1; i < totalMunicipios; i ++){
document.forms[0].elements.menuMunicipios.options[1] = null;
}
}
if(document.forms[0].elements.menuDepartamento.value === "x"){
document.forms[0].elements.menuMunicipios.selectedItem = 0;
document.forms[0].elements.menuMunicipios.disabled = true;
}
else
{
document.forms[0].elements.menuMunicipios.options.length = arregloMunicipiosDepartamento.length;
for (var i = 0; i < arregloMunicipiosDepartamento.length; i ++) {
var opcionTemporal = new Option(arregloMunicipiosDepartamento[i], (i+1));
***document.forms[0].elements.menuMunicipios.options[i+1].text = opcionTemporal.text;
document.forms[0].elements.menuMunicipios.options[i+1].value = opcionTemporal.value;***
}
document.forms[0].elements.menuMunicipios.disabled = false;
}
}
function municipiosColombia(posicion) {
var antioquia, atlantico, arregloTodos, arregloMunicipiosDepartamento = new Array();
antioquia=["Medellín","Abejorral","Abriaqui","Alejandria"];
atlantico = ["Barranquilla","Baranoa","Campo De La Cruz","Candelaria"];
arregloTodos = [antioquia, atlantico];
arregloMunicipiosDepartamento=arregloTodos[posicion];
return arregloMunicipiosDepartamento;
}
</script>
I have highlighted the work that doesn't work.
The way I would do what you describe is to clear out the options each time and recreate the required ones, then add them into the particular select, like so:
var regions = {};
regions['A'] = ['mu', 'ni', 'ci', 'pal', 'it', 'y'];
regions['B'] = ['I', 'like', 'bananas'];
var selRegion = document.getElementById('region');
selRegion.onchange = setMunicipalities;
var selMun = document.getElementById('municipality');
function setMunicipalities(e)
{
while(selMun.length > 0)
{
selMun.remove(0);
}
if(selRegion.selectedOptions[0].value === 'ALL')
{
for(var r in regions)
{
if(regions.hasOwnProperty(r))
{
addMunicipalities(regions[r]);
}
}
}
else
{
var reg = selRegion.selectedOptions[0].value;
addMunicipalities(regions[reg]);
}
}
function addMunicipalities(region)
{
var allMun = document.createElement('option');
allMun.setAttribute('value', 'ALL');
var allMunText = document.createTextNode('ALL');
allMun.appendChild(allMunText);
selMun.add(allMun);
for (var mi = 0; mi < region.length; mi++)
{
var m = region[mi];
var mun = document.createElement('option');
mun.setAttribute('value', m);
var munText = document.createTextNode(m);
mun.appendChild(munText);
selMun.add(mun);
}
}
setMunicipalities(null);
<label for="region">Region</label>
<select id="region">
<option selected="selected" value="ALL">ALL</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<label for="municipality">Municipality</label>
<select id="municipality">
</select>
I haven't read your entire code because I had a hard time reading code with contents not in English but anyway, I get what you're trying to do here. Suppose that your first select list contains "Region A" and "Region B" as options; "Municipality A1", "Municipality A2", "Municipality B1","Municipality B2" are the possible options for the second select list. Here's a function that will change the options of the second select list depending on what is selected on the first select list:
function optionChanger(v_selected){
var whatisselected= v_selected.options[v_selected.selectedIndex].value;
var municipalities= {};
municipalities['A'] = ['Municipality A1','Municipality A2'];
municipalities['B'] = ['Municipality B1','Municipality B2'];
v_selected.options.length=0; //remove the contents of the second select list
v_selected.options[0] = new Option(municipalities[whatisselected][0],municipalities[whatisselected][0],false,true);// set the first option of the second list as the default selected value
for(x=1;x<municipalities[whatisselected].length;x++){ //add the remaining options to the second list
v_selected.options[x] = new Option(municipalities[whatisselected][x],municipalities[whatisselected][x],false,false);
}
}
Then add this inside the tag of your FIRST select list:
onchange='optionChanger(this)'
PS: Please notice that the return value of the first select list must be 'A', 'B'