Changing options in HTML <selecet>based on result of another select

Changing options in HTML <selecet>based on result of another select - javascript

Not sure what I'm doing wrong here, I put my code in a jsfiddle so it might be easier to read and debug. No matter what option I select from the list, it thinks it's the 'Single room' value that I've chosen. It is supposed to display odd numbers up to 5 if the room is a single room and , even number if double room selected (and < 7) and for the family room the numbers shown should only be 7.
Here's the fiddle, https://jsfiddle.net/35rchfup/
Thanks to anyone who can help in advance.
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomType">Choose room
type:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomType">
<div class="select">
<select class="form-control" runat="server" id="chooseRoomType" onchange="showValidRooms">
<option value="0">Choose room</option>
<option value="1">Single room</option>
<option value="2">Double room</option>
<option value="3">Family room</option>
</select>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomNo">Choose room number:
</label>
<div class="col-md-4">
<label class="select" for="chooseRoomNo">
<div class="select">
<select class="form-control" runat="server" id="chooseRoomNo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</label>
</div>
<script>
document.getElementById("chooseRoomType").onchange = function() {
showRooms()
};
function showRooms() { //chooses single room every time
var select = document.getElementById("chooseRoomNo");
var selectedValue = select.options[select.selectedIndex].value;
if (selectedValue == 1) {
$('#chooseRoomNo')
.empty()
.append('<option value="1">1</option>', '<option value="3">3</option>',
'<option value="5">5</option>');
} else if (selectedValue == 2) {
$('#chooseRoomNo')
.empty()
.append('<option value="2">2</option>', '<option value="4">4</option>',
'<option value="6">6</option>');
} else if (selectedValue == 3) {
//show family room (number 7)
$('#chooseRoomNo')
.empty()
.append('<option value="7">7</option>');
} else if (selectedValue == 0) {
alert("You must choose a room type.");
}
console.log(selectedValue);//always 1
}
</script>

Changed your example: https://jsfiddle.net/35rchfup/2/
You had two issues:
1) You were referring to the wrong dropdown (var select = document.getElementById("chooseRoomNo");)
2) You were not calling the function onchange (<select class="form-control" runat="server" id="chooseRoomType" onchange="showValidRooms">) that is anyway useless because you bind your event through JavaScript
Here your example:
document.getElementById("chooseRoomType").onchange = function() {
showRooms()
};
function showRooms() { //chooses single room every time
var selectedValue = $("#chooseRoomType").val();
if (selectedValue == 1) {
$('#chooseRoomNo')
.empty()
.append('<option value="1">1</option>', '<option value="3">3</option>', '<option value="5">5</option>');
} else if (selectedValue == 2) {
$('#chooseRoomNo')
.empty()
.append('<option value="2">2</option>', '<option value="4">4</option>', '<option value="6">6</option>');
} else if (selectedValue == 3) {
//show family room (number 7)
$('#chooseRoomNo')
.empty()
.append('<option value="7">7</option>');
} else if (selectedValue == 0) {
alert("You must choose a room type.");
}
console.log(selectedValue);//always 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomType">Choose room type:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomType">
<div class="select">
<select class="form-control" runat="server" id="chooseRoomType">
<option value="0">Choose room</option>
<option value="1">Single room</option>
<option value="2">Double room</option>
<option value="3">Family room</option>
</select>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomNo">Choose room number:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomNo">
<div class="select">
<select class="form-control" runat="server" id="chooseRoomNo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</label>
</div>
</div>

Use var select = document.getElementById("chooseRoomType"); in your function showRooms() instead of var select = document.getElementById("chooseRoomNo");. Because you are getting value of the second dropdown which is always 1 by default.

It seems you are choosing the wrong DropDown:
function showRooms() { //chooses single room every time
var select = document.getElementById("chooseRoomNo");// This should be "chooseRoomType"
var selectedValue = select.options[select.selectedIndex].value;
if (selectedValue == 1) {

Basically you were calling roomnumber selector instead of roomtype.

Beside all the other answers pointing to your typo, here's how I'd do it:
using some clearly defined room-logic, and show/hide
All you need:
var roomLogic = {
0 : [1,2,3,4,5,6,7],
1 : [1,3,5],
2 : [2,4,6],
3 : [7]
};
$("#chooseRoomType").on("change", function() {
var type = this.value;
$("#chooseRoomNo").find("option").hide().filter(function() {
return $.inArray( +this.value, roomLogic[type] ) > -1;
}).show().eq(0).prop("selected", true);
});
Here's a full demo:
var roomLogic = {
0 : [1,2,3,4,5,6,7],
1 : [1,3,5],
2 : [2,4,6],
3 : [7]
}
$("#chooseRoomType").on("change", function() {
var type = this.value;
$("#chooseRoomNo").find("option").hide().filter(function() {
return $.inArray( +this.value, roomLogic[type] ) > -1;
}).show().eq(0).prop("selected", true);
// if (type==0) alert("You need to select a room");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomType">Choose room type:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomType">
<div class="select">
<!-- onchange="showValidRooms" ??? -->
<select class="form-control" runat="server" id="chooseRoomType">
<option value="0">Choose room</option>
<option value="1">Single room</option>
<option value="2">Double room</option>
<option value="3">Family room</option>
</select>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="chooseRoomNo">Choose room number:</label>
<div class="col-md-4">
<label class="select" for="chooseRoomNo">
<div class="select">
<select class="form-control" runat="server" id="chooseRoomNo">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
</label>
</div>
</div>
One day, if your room logic changes, all you need to carelessly edit is the var roomLogic. Nothing else.

Related

Jquery Append select onChange function in javascript [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 months ago.
Here Is My HTML Code
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value=" ">Choose Category</option>
#foreach ($cat as $data)
<option value="{{ $data->id }}">{{ $data->cname }}</option>
#endforeach
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>
And Here is my javascript code and in this code first one was working fine that is #serv block but
the second one that is #repair section its not working onChange so please help e with this.
<script>
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
}
else
$('#serv').empty();
});
This below Block is not working please help me with it.
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
</script>

at the first, when the page is loaded, you don't have an element with id "service" in the DOM. so your event will not be bound.
you should put your second event into the first if condition. like this:
$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-12">
<label for="inputPassword4">Category</label>
<select name="cat" id="cat" class="form-control">
<option value="">Choose Category</option>
<option value="6">value is 6</option>
</select>
</div>
<div id="serv"></div>
<div id="repair"></div>

You're creating the select with id "servic" dynamically, so you have to attach the change handler only after it's appended to #serv.
if (this.value == 6 || this.value == 7) {
$('#serv').append(`...`);
$('#servic').change(function() {
// listener code...
});
}

$('#cat').change(function() {
if (this.value == 6 || this.value == 7) {
$('#serv').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Service</label>
<select class="form-control" id="servic" name="serv" required>
<option value=" ">Choose Services</option>
<option value="service">Service</option>
<option value="repair">Repair</option>
<option value="installation">Installation</option>
<option value="uninstallation">Uninstallation</option>
</select>
</div>`);
$('#servic').change(function() {
console.log('in');
if (this.value == 'repair') {
$('#repair').append(`<div class="form-group col-md-12">
<label for="inputEmail4">Repair</label>
<select class="form-control" id="repar" name="rep" required>
<option value="power_issue">Power Issue</option>
<option value="less_cooling">Less Cooling</option>
<option value="water_leakage">Water Leakage</option>
</select>
</div>`);
}
else
$('#repair').empty();
});
}
else
$('#serv').empty();
});

Passing ID in two different select function into 1 const function in jQuery?

I have 2 different select function that I'll use and get the id from the two different select and pass it into the 1 main function. But I have problem with getting the id from the select function.
What is the correct way on how to pass the id of cat_id and role_id into the getMyMode(a,b)
$(document).ready(function() {
$("#cat").change(function() {
let cat_id = $(this).val();
getMyMode(cat_id);
});
$("#role").change(function() {
let role_id = $(this).val();
getMyMode(role_id);
});
});
const getMyMode = (a, b) => {
console.log(a, b);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Like this
const getMyMode = (a, b) => { console.log(a, b); };
$(function() { // when page has loaded
$("#cat, #role").on("change", function() { // when either has changed
let role_id = $("#role").val();
let cat_id = $("#cat").val();
getMyMode(cat_id,role_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<label class="form-label"> Category</label>
<select class="form-control mb-3" id="cat">
<option value="99" hidden> Choose Category</option>
<option value="0">Cat 1</option>
<option value="1">Cat 2</option>
</select>
</div>
<div class="col-lg-4">
<label class="form-label"> Role</label>
<select class="form-control mb-3" id="role">
<option value="99" hidden>Choose Role</option>
<option value="23">Role 1</option>
<option value="24">Role 2</option>
</select>
</div>

Change select options based on a select from within multiple iterations

I had a select which, depending on the selected option, affected the options from two other selects (which also affected each other between themselves). So far, this was working fine. Here is the code I had:
HTML
<div id="sel" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo">
<option selected>Select an option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
JS
$('.tipo').on("change", function() {
var val = $(this).val();
$(".num-a").html(options1[val]);
$(".num-n").html(options2[val]);
if (val == 1) {
$('.num-a').on("change", function() {
var vara = $(this).val();
$(".num-n").html(optionsIn[vara]);
});
$('.num-n').on("change", function() {
var varn = $(this).val();
$(".num-a").html(optionsIn[varn]);
});
}
if (val == 2) {
// same with different arrays
}
if (val == 3) {
// same with different arrays
}
if (val == 4) {
// same with different arrays
}
});
var options1 = [
array with options 1
];
var options2 = [
array with options 2
];
etc ...
I had to change it, so that instead of only one time, I will have this same code repeated X number of times (depending on an input set by the user), all of which will have the same three selects inside, which will have the same options. So it now looks something like this:
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
...
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
options...
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
The problem is that with the code I have, whenever I set any of the .tipo options, it affects all of the X .num-a and .num-n selects (also changing any of the .num-a affects all of the .num-n and viceversa), when it should only affect the options of the corresponding nth selects.
I had to chang the first on("change") to $(document).on('change') for the selects to be recognized (found it on another user answer), so the first line of the script is now:
$(document).on('change','.tipo-habitacion-sel', function() {
I'm not very good with js, so this may be something obvious, but I tried several things and can't make it work.

As there mutiple selects in your html code so to refer only the required selects you can use .closest() this will get the closest div eg : sel-val and then use .find method to find select-box where you need append new options
Demo Code :
$(document).on('change', '.tipo', function() {
var val = $(this).val();
//get closest div with class sel-val
var selector = $(this).closest(".sel-val")
//then use find to get required select refernce
selector.find(".num-a").html("<option>0</option><option value='1' >1</option>");
selector.find(".num-n").html(" <option>0</option><option value='1' >1</option>");
//other codes.
});
$(document).on('change', '.num-a', function() {
var vara = $(this).val();
var selector = $(this).closest(".sel-val")
// $(".num-n").html(optionsIn[vara]);
selector.find(".num-n").html("<option>0</option><option value='2'>2</option>");
});
$(document).on('change', '.num-n', function() {
var varn = $(this).val();
var selector = $(this).closest(".sel-val")
//$(".num-a").html(optionsIn[varn]);
selector.find(".num-a").html("<option>0</option><option value='3'>3</option>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sel-1" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-1">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-1">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-1">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>
<hr>
<div id="sel-X" class="sel-val">
<div class="row">
<div class="col">
<select class="tipo" name="tipo-X">
<option value="0">0</option>
<option value="4">4</option>
</select>
</div>
<div class="col">
<select class="num-a" name="num-a-X">
<option value="0" selected>0</option>
</select>
</div>
<div class="col">
<select class="custom-select num-n" name="num-n-X">
<option value="0" selected>0</option>
</select>
</div>
</div>
</div>

Get value from select and clone form number of times

I have a select box , i want user to select value and then after getting value forms are to be added in page according to selected value , like if user selects "1" 1 form is to be added and if user select "10" 10 forms. also if nothing is given or not selected no form to display . It seems to be problem in my js , it does add forms but add other more forms too which i dont expect.
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class=bookForm>
<div class=col-xs-12>
<h3 class=bookForm-heading>Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
.bookForm{
display:none;
}
function bookFormToggle(){
var traveller = $("#travellersNumber");
var form = $(".bookForm");
var heading = $('.bookForm-heading');
function unhideForm(){
var travellerValue = parseInt(traveller.val());
for(i=0;i<travellerValue;i++){
heading = heading.html('Traveller '+ (i+1) +' Information');
form.clone().insertAfter(form);
}
}
traveller.on("change",unhideForm);
unhideForm();
}
bookFormToggle();

Hope this is what you want.
$(function () {
$("#travellersNumber").on('change', function () {
var traveller = $(this);
var form = $("#original");
var heading = $('.bookForm-heading');
var travellerValue = parseInt(traveller.val());
$("#original").hide();
$("[id*='original_']").not("#original").remove(); //Remove all forms except original form
for (i = 0; i < travellerValue; i++) {
if (i == 0) {
heading = heading.html('Traveller 1 Information');
$("#original").show();
}
else
{
var cloneDiv = form.clone().prop("id", "original_" + i).appendTo("#travellersDetail");
cloneDiv.find(".bookForm-heading").html('Traveller ' + (i + 1) + ' Information');
}
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.bookForm {
display: none;
}
</style>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm" id="original">
<div class=col-xs-12>
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12 col-md-3">
<div class=form-group>
<label>First Name</label>
<input class=form-control name=firstName>
</div>
</div>
</div>
<div id="travellersDetail"></div>

The problem is that you are not removing the old forms that you have added.
$(document).ready(function(){
var traveller = $('select[name="trav"]');
traveller.change(function(){
$('.bookForm').not('.bookForm:first').remove();
var travellerValue = traveller.val();
var form = $('.bookForm:first');
for(i=travellerValue;i>1;i--){
var newAdd = form.clone().insertAfter(form);
newAdd.find('.bookForm-heading').html('Traveller'+ (i)+' Information');
}
$('.bookForm').show();
});
});
.bookForm{
background-color:green;
padding:5px;
margin:5px;
}
#travellersNumber{
width:150px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label>Number of travellers</label>
<select class="form-control" id="travellersNumber" name="trav">
<option value="0">Select Numbers Of Travellers</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div class="bookForm row">
<div class="col-xs-12">
<h3 class="bookForm-heading">Submit your details</h3>
</div>
<div class="col-xs-12">
<div class="form-group">
<label>First Name</label>
<input class="form-control" name="firstName">
</div>
</div>
</div>

<select id='populate' onchange='populate();'></select>
<div id='myform'></div>
function populate()
{
var forms=$("#populate").val();
if (forms!=0)
{
var formelements='';
for (i=1; i<=forms; i++)
{
var formelements .= "<div class=bookForm>" +i+ "</div>";
}
$("#myform").html(formelements);
}
}

div containing select not working after appending to form

I have a form in which I have drop down menu to select a city. I want to add one more drop down to this form to select location in the selected city. My form code looks as follows
<s:form role="form" name = "signUpForm" onsubmit="return validateSignupForm()" action = "signUp" method="post" namespace="/" theme="simple">
<div class ="form-group">
<label for= "city">City</label>
<select list="cityList" onchange="getLoad()" class="form-control selectpicker" name="city" id="city" data-live-search="true" data-size="5">
<option value="NA">--select a city--</option>
<option value="A"> A</option>
<option value ="B">B</option>
<option value ="C">C</option>
<option value ="D">D</option>
</select>
</div>
<div id="parentLocationDiv"></div>
</s:form>
In addition to this I have created four separate div containing select options for location in city.
<div class="form-group" id="ALocation">
<select id="alocation" name="alocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group" id="BLocation">
<select id="blocation" name="blocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
Now to append these divs to the form I making use of the following javascript:
function getLoad(){
var ParentDiv = document.getElementById("parentLocationDiv");
while(ParentDiv.hasChildNodes())
{
ParentDiv.removeChild(ParentDiv.childNodes[0]);
}
var cityName = document.getElementById("city").value;
if(ParentDiv.hasChildNodes())
{ while(ParentDiv.hasChildNodes())
{
ParentDiv.removeChild(Parentdiv.childNodes[0]);
}
}
debugger;
var clone = document.getElementById(cityName.concat("Location")).cloneNode(true);
ParentDiv.appendChild(clone);
ParentDiv.childNodes[0].style.display="block";
var newdiv = ParentDiv.childNodes[0];
newdiv.getElementsByTagName("select").name="location";
newdiv.getElementsByTagName("select").id="location";
}
Now when I select a city corresponding location drop down menu is visible in form but when I select any option it does not get selected. Can anyone help me with this?

Your codes seems to work except for throwing errors where there are no matching locations. You can fix it as follows:
function getLoad() {
var parentDiv = document.getElementById("parentLocationDiv");
while (parentDiv.hasChildNodes()) {
parentDiv.removeChild(parentDiv.childNodes[0]);
}
var cityName = document.getElementById("city").value || "";
var target = document.getElementById(cityName.concat("Location"));
if (!target)
return;
var clone = target.cloneNode(true);
clone.getElementsByTagName("select").name = "location";
clone.getElementsByTagName("select").id = "location";
parentDiv.appendChild(clone);
parentDiv.childNodes[0].style.display = "block";
}
.holder {
display: none;
}
<form role="form" name="signUpForm" onsubmit="return validateSignupForm()" action="signUp" method="post" namespace="/" theme="simple">
<div class="form-group">
<label for="city">City</label>
<select list="cityList" onchange="getLoad()" class="form-control selectpicker" name="city" id="city" data-live-search="true" data-size="5">
<option value="NA">--select a city--</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
</div>
<div id="parentLocationDiv"></div>
</form>
<div class="form-group holder" id="ALocation">
<select id="alocation" name="alocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="form-group holder" id="BLocation">
<select id="blocation" name="blocation">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>

Develop Reference

JavaScript is the programming language of the Web.

Changing options in HTML <selecet>based on result of another select - javascript

Use var select = document.getElementById("chooseRoomType"); in your function showRooms() instead of var select = document.getElementById("chooseRoomNo");. Because you are getting value of the second dropdown which is always 1 by default.

It seems you are choosing the wrong DropDown: function showRooms() { //chooses single room every time var select = document.getElementById("chooseRoomNo");// This should be "chooseRoomType" var selectedValue = select.options[select.selectedIndex].value; if (selectedValue == 1) {

Basically you were calling roomnumber selector instead of roomtype.

Related

Jquery Append select onChange function in javascript [duplicate]

Passing ID in two different select function into 1 const function in jQuery?

Change select options based on a select from within multiple iterations

Get value from select and clone form number of times

div containing select not working after appending to form

Categories

Resources