Chained selects - delegate dynamically added select

Chained selects - delegate dynamically added select - javascript

I'm using chained selects. What i need to do, is to use multiple selects added dynamically by user, but it won't work.
Here is a demo page with multiple chained selects
Here's a jsfiddle:
http://jsfiddle.net/5qLfn/
And here's code:
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
<form>
<select class="mark-remote" name="mark">
<option value="">--</option>
<option value="bmw">BMW</option>
<option value="audi">Audi</option>
</select>
<select class="series-remote" name="series">
<option value="">--</option>
</select>
<select class="model-remote" name="model">
<option value="">--</option>
</select>
<select class="engine-remote" name="engine">
<option value="">--</option>
</select>
<button id="button-remote" type="submit">Button</button>
</form>
/* For multiple jquery.chained.js */
$(".series").each(function() {
$(this).chained($(".mark", $(this).parent()));
});
$(".model").each(function() {
$(this).chained($(".series", $(this).parent()));
});
$(".engine").each(function() {
$(this).chained([
$(".series", $(this).parent()),
$(".model", $(this).parent())
]);
});
And it work's for me as a static selects. But it won't work when I try do add new level with jquery like this:
$("#ql_add_case_schema").on("click", function () {
var select='\
<div class="container">\n\
<div class="row clearfix">\n\
<div class="col-md-1 column">\n\
USUN\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="mark-remote" name="mark"><option value="">--</option><option value="bmw">BMW</option><option value="audi">Audi</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="series-remote" name="series"><option value="">--</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="model-remote" name="model"><option value="">--</option></select>\n\
</div>\n\
<div class="col-md-2 column">\n\
<select class="engine-remote" name="engine"><option value="">--</option></select>\n\
</div>\n\
</div>\n\
</div>\n\
</div>';
$('#ql_div_kodowania').append(select);
});

Related

How to get the values of all selected options in select tags named skill[]?

Having the following html structure
<div id="container">
<div>
<button>Add item</button>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one" selected="">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two" selected="">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three" selected="">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
I want to get a list of values of all selected options in select tags named skill[].
I am expecting the result ['one', 'two', 'three']
In order to accomplish this I am first trying:
document.querySelector('#container').querySelectorAll('select[name=skills[]]')
I get the following error message
SyntaxError: 'select[name=components[]]' is not a valid selector
I also think I could try to get all first select tag in every div.well tag
document.querySelector('#container').querySelectorAll('.well > select:first-child')
But I am getting a empty NodeList
Thanks for any suggestions to solve this scenario
Thanks for any advice
Thanks everyone I got the answer thanks to you comments and answers.
This give me the values of all selected options in select tags named skill[]
Array.from(document.querySelectorAll('[name="skills[]"] option:checked')).map(option => option.value)
This prints ['one', 'two', 'three']

This should do what you're looking for. I included a snippet that will console log the variable whenever a skills[] select box is changed.
document.querySelectorAll('[name="skills[]"] option:checked')
let selectionArray = []
document.querySelectorAll('[name="skills[]"]').forEach(menu => {
menu.addEventListener('change', e => {
e.preventDefault()
const selection = document.querySelectorAll('[name="skills[]"] option:checked')
selection.forEach((selected, i) => {
selectionArray[i] = selected.value
})
console.log(selectionArray)
})
})
<div id="container">
<div>
<button>Add item</button>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>

How to get the first select tag in a set of divs?
In vanilla JS, use document.querySelector('select[name="skills[]"]'); if you want to select the first element with matching selector.
document.querySelector always returns the first element with matching selector. and document.querySelectorAll gives the node list i-e all of the nodes that match the selector
var el = document.querySelector('select[name="skills[]"]');
console.log(el.innerHTML)
<div id="container">
<div>
<button>Add item</button>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="well">
<button>Delete</button>
<div>
<label>Skill</label>
<select name="skills[]">
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<label>Level</label>
<select name="levels[]">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>

Difference between two input value without button

I have a form i have 2 select menu and one input menu
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control" onkeyup="calc()">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control" >
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly >
</div>
</form>
I use this code in javascript to calculate the difference and this difference will be 100-(select1+select2) without click any button
<script>
function calc() {
var textValue1 = document.getElementById('cpercentage').value;
var textValue2 = document.getElementById('epercentage').value;
document.getElementById('mpercentage').value = 100-(textValue1 + textValue2);
}
</script>
but i don't have any result in the input field i don't know why can any body help to solve this problem
after a search i see this in stackoverflow link
but also didn't help

Bind the change event to select elements,
document.getElementById('cpercentage').addEventListener('change', calc);
document.getElementById('epercentage').addEventListener('change', calc);
However, As you have tagged jquery, You can use
$('#cpercentage, #epercentage').on('change', calc )
window.onload = function() {
var cpercentage = document.getElementById('cpercentage');
var epercentage = document.getElementById('epercentage');
//Bind event handler
cpercentage.addEventListener('change', calc);
epercentage.addEventListener('change', calc);
function calc() {
var textValue1 = Number(cpercentage.value) || 0;
var textValue2 = Number(epercentage.value) || 0;
document.getElementById('mpercentage').value = 100 - (textValue1 + textValue2);
}
}
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly>
</div>
</form>

Hi you are getting String by using this document.getElementById('cpercentage').value
so you have to parse it into integer to perform mathematical operations.
<select id="epercentage" name="txt_epercentage" class="form-control" onchange="calc()" >
I have tried to call your function by select onchange and it is working fine
hope this will be help.
<html>
<head></head><body>
<form method="post" action="">
<label class="col-sm-3 control-label" for="textinput">Civil Works</label>
<div class="col-sm-3">
<select id="cpercentage" name="txt_cpercentage" class="form-control">
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Electrical Works</label>
<div class="col-sm-3">
<select id="epercentage" name="txt_epercentage" class="form-control" onchange="calc()" >
<option value=""></option>
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
<option value="55">55%</option>
<option value="60">60%</option>
<option value="65">65%</option>
<option value="70">70%</option>
<option value="75">75%</option>
<option value="80">80%</option>
<option value="85">85%</option>
<option value="90">90%</option>
<option value="95">95%</option>
<option value="100">100%</option>
</select>
</div>
<label class="col-sm-3 control-label" for="textinput">Mechanical Works</label>
<div class="col-sm-3">
<input type="text" id="mpercentage" name="txt_mpercentage" class="form-control" readonly >
</div>
</form>
</body>
<script>
function calc() {
var textValue1 = parseInt(document.getElementById('cpercentage').value);
var textValue2 = parseInt(document.getElementById('epercentage').value);
var x = 100-(textValue1+textValue2);
alert(x);
document.getElementById('mpercentage').value=x;
}
</script>
</html>

How to show a div when an option is selected [duplicate]

I'm trying to make a form that changes after the users makes a choice.
If the user select "Option A" then show content of the div with the class "option1".
I have already done this with very simple jquery(see code below or jsfiddle).
What I can't figure out is how to make it dynamic.
Here is how I would do it in my head:
Get all option values from "#select" and put into array.
Replace the content of "hideAll" function with the new array.
Make some kind of "for-each-function" that runs though the array and
makes the if stament.
A little note: The option value are always the same as the div class.
var hideAll = function() {
$('.option1, .option2, .option3').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
console.log(category);
if (category === 'option1') {
$('.option1').show();
}
if (category === 'option2') {
$('.option2').show();
}
if (category === 'option3') {
$('.option3').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>

Give your option divs another class
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1 optiondiv" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2 optiondiv" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3 optiondiv" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
Use your new class in hideall
var hideAll = function() {
$('.optiondiv').hide();
}
Use the select value to display a block
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
http://jsfiddle.net/yd5qsquL/

No need for a loop at all, and you can just search for any div whose class begins with option:
var hideAll = function() {
$('div[class^=option]').hide();
}
$('#select').on('change', function() {
hideAll();
var category = $(this).val();
$('.' + category).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>

I think there's an easier way to tackle this. First, use a combination of IDs and classes for the HTML, and then use JQuery to handle the dynamic stuff for you.
The HTML
Note that I have added class="option-grouping" id="option1" etc to each of your divs. This is better semantic structure and makes the JQuery easier.
<form method="post">
<label for="option">Options</label>
<select name="select" id="select">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
<div class="option-grouping" id="option1" style="display:block;">
<label for="countries">Countries</label>
<select name="countries">
<option value="denmark">Denmark</option>
<option value="norway">Norway</option>
<option value="uk">UK</option>
</select>
</div>
<div class="option-grouping" id="option2" style="display:none;">
<label for="letters">Letters</label>
<select name="letters">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
</div>
<div class="option-grouping" id="option3" style="display:none;">
<label for="numbers">Numbers</label>
<select name="numbers">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
The JQuery
This is the cool part. With that all done, try this as your JQuery:
$('#select').on('change', function() {
var category = $(this).val();
/* Hide all the divs */
$('.option-grouping').hide();
/* Now unhide the selected options */
$('#' + category).show();
});
Works a treat!

Append Select Value to Title

I am trying to append the select value for each div to its heading. How can I grab the value within each div then append it?
I want to append this on page load and not wait until a click or change takes effect. Here is a jsfiddle https://jsfiddle.net/dqfvyvdt/2/
Markup: Repeated multiple times and each box will have a different selected value.
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option selected="selected" value="car">Car</option>
<option value="car">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
JS:
var title = $('.module').find('h3');
var type = $('.module').find('.type').val();
$(title).append(type);

$('.module').find('.type').val() gets the value of the first type element, you need to find the value of each type in relation to the h3 element.
So you need to iterate over the h3 and find each one's type value and add it to its contents
Use .append()
$('.module h3').append(function(i, text){
return $(this).next().val()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a </h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>
If you want to update the content of change also then
$('.module .type').change(function(i, text) {
var $this = $(this);
$this.prev().find('.h3-type').text($(this).find('option:selected').text());
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike" selected>Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter">Skooter</option>
</select>
</div>
<div class="module">
<h3>This is a <span class="h3-type"></span></h3>
<select name="type" class="type">
<option value="car">Car</option>
<option value="bike">Bike</option>
<option value="truck">Truck</option>
<option value="skateboard">Skateboard</option>
<option value="skooter" selected>Skooter</option>
</select>
</div>

Making a different value the default using javascript

I am trying to make the default value different than what is defined in the HTML. I cannot change the HTML because it is locked by a parent company of ours. I can however change the default if I use javascript. Here is the HTML
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>
Now how would I make the Office value the default only using javascript?

Simply use that one line of javascript below to change the value on runtime
document.getElementById('addressListArray[0].addressTypeString').value = 'Office';
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required >
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option></select>
</div>
</div>

!function(){var e=document.getElementsByTagName("option");e[0].selected=!1,e[1].selected=!0}();
<div class="col-md-6">
<div id="addressTypeWrapper" class="form-group">
<label for="addressListArray[0].addressTypeString">Type</label>
<select name="addressListArray[0].addressTypeString" id="addressListArray[0].addressTypeString" class="form-control" required>
<option value="Home" selected="selected">Home</option>
<option value="Office">Office</option>
<option value="Contact">Contact</option>
<option value="Other">Other</option>
<option value="Billing">Billing</option>
<option value="Purchaser">Purchaser</option>
<option value="Foreign">Foreign</option>
<option value="Agency">Agency</option>
<option value="Summer">Summer</option>
<option value="School">School</option>
<option value="Campus">Campus</option>
<option value="Temporary">Temporary</option>
<option value="Shipping">Shipping</option>
<option value="Local">Local</option>
<option value="Permanent">Permanent</option>
</select>
</div>
</div>

Select the dropdown and use .val(). If its a dynamic id then add another attribute like data-dropdown="list" as I have done below
$("select[data-dropdown='list']").val('Office');

Develop Reference

JavaScript is the programming language of the Web.

Chained selects - delegate dynamically added select - javascript

Related

How to get the values of all selected options in select tags named skill[]?

Difference between two input value without button

How to show a div when an option is selected [duplicate]

Append Select Value to Title

Making a different value the default using javascript

Categories

Resources