I have a form with month and year to select. I want to save selected values after page reload. I have project in django and i don't have any idea how do it.
<form class="form-horizontal" method="post" action="show_incomes">{% csrf_token %}{{form}}
<div class="form-group ">
<label class="control-label col-sm-5" for="miesiac">Wybierz miesiąc</label>
<div class="col-sm-3">
<select class="select form-control" id="miesiac" name="miesiac">
<option value="01" >Styczeń</option>
<option value="02" >Luty</option>
<option value="03" >Marzec</option>
<option value="04" >Kwiecień</option>
<option value="05" >Maj</option>
<option value="06" >Czerwiec</option>
<option value="07" >Lipiec</option>
<option value="08" >Sierpień</option>
<option value="09" >Wrzesień</option>
<option value="10" >Październik</option>
<option value="11" >Listopad</option>
<option value="12" >Grudzień</option>
</select>
</div>
</div>
<label class="control-label col-sm-5" for="rok">Wybierz rok</label>
<div class="col-sm-2">
<select class="select form-control" id="rok" name="rok" >
<option value="2017" >2017</option>
<option value="2018" >2018</option>
<option value="2019" >2019</option>
<option value="2020" >2020</option>
<option value="2021" >2021</option>
<option value="2022" >2022</option>
<option value="2023" >2023</option>
<option value="2024" >2024</option>
<option value="2025" >2025</option>
</select><br>
<button type="submit" class="btn btn-large btn-info">Pokaż przychody</button>
</div>
</form>
You can use local storage/ session storage to save data
Check here
Related
I have a simple form that loops some select elements from the server. In this case, I want to sum every option value that selected and not the disabled one and show the calculation of these values into the input value every time when the user change the value inside it. How is it work with onchage event. Thanks in advance.
HTML Code Example
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" required>
<button type="submit">Submit</button>
</form>
Filter, Map and reduce
$(function() {
const sumSels = () => $("#total").val($sels
.filter(":enabled") // this is not strictly needed in your case
.map(function() { return +this.value })
.get()
.reduce((a, b) => a + b)
.toFixed(2));
const $sels = $('[name="presence-value"]');
$sels.on("change", sumSels); // event handler
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>
Version with dynamically added or removed selects
$(function() {
const sumSels = (e) => $("#total").val(
$("form").find('[name="presence-value"]')
.filter(":enabled") // this is not strictly needed in your case
.map(function() {
return +this.value
})
.get()
.reduce((a, b) => a + b)
.toFixed(2));
$("form").on("change", "[name='presence-value']", sumSels); // event handler on existing sels
sumSels(); // initialise on load
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input type="number" value="0" readonly id="total">
<button type="submit">Submit</button>
</form>
You can just listen to the change event from any of the selects, then add their values together
$(document).ready(function() {
$('select').change(function() {
let total = 0;
$('select').each(function() {
total += +$(this).val()
})
console.log('the total is', total)
$('[name=total]').val(total)
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required>
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required>
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input name='total' type="number" value="0" required>
<button type="submit">Submit</button>
</form>
You need to use document.querySelectorAll('select') to get all select tags and then by selectedOptions get selected value of each select tags and calculate sum of them.
All above actions is in the one method (say getSum) that you can bind with onchange="getSum()" of each select tag.
Note that this solution is based on pure javascript code and I don't use any js library.
function getSum() {
var selectes = document.querySelectorAll('select');
sum = 0;
for (var i = 0; i < selectes.length; i++) {
sum += +selectes[i].value;
}
document.getElementById("submited").value = sum;
}
<form>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="1 presence-value form-control" name="presence-value" required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1" selected>Full</option>
<option value="0.5">Half</option>
<option value="0">None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<div class="form-group">
<select class="2 presence-value form-control" name="presence-value" disabled required onchange="getSum()">
<option value="">-- Select--</option>
<option value="1">Full</option>
<option value="0.5">Half</option>
<option value="0" selected>None</option>
</select>
</div>
<input id="submited" type="number" value="0" required>
<button type="submit">Submit</button>
In a Laravel app I've got a form in a modal that on load shows just one select menu. When a user makes a selection a div needs to appear below with another select of subsequent options. I've tried a number of approaches from SO and Code Pen but can't seem to make the subsequent divs display. The code below is where I've finally ended up. Any help would be appreciated.
$(document).ready(function () {
$('.scopes').hide();
$('#programSelect').change(function () {
$('.scopes').hide();
$('#'+$(this).val()).show();
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="programSelect">Select Program</label>
<span class="bg-danger">{{ $errors->first('program') }}</span>
<select id="programSelect" class="form-control custom-select program-select" name="program">
<option></option>
#foreach($program as $program)
<option value="{{ $program->id }}">{{ $program->abbr }}</option>
#endforeach
</select>
</div>
<div class="form-group scopes nop" id="nop">
<label for="nopselect">Select NOP Scope</label>
<span class="bg-danger">{{ $errors->first('nopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="nopselect">
<option selected></option>
<option value="1">Crops</option>
<option value="2">Livestock</option>
<option value="3">Handling</option>
<option value="4">Wild Crops</option>
</select>
</div>
<div class="form-group scopes eu" id="eu">
<label for="euselect">Select EU Scope</label>
<span class="bg-danger">{{ $errors->first('euselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="euselect">
<option selected></option>
<option value="5">Unprocessed Plant Products</option>
<option value="6">Livestock</option>
<option value="7">Handling</option>
<option value="8">Feed</option>
<option value="9">Seed</option>
<option value="10">Aquaculture</option>
</select>
</div>
<div class="form-group scopes jpexport" id="jpexport">
<label for="jpexportselect">Select JP Export Scope</label>
<span class="bg-danger">{{ $errors->first('jpexportselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jpexportselect">
<option selected></option>
<option value="27">Crops</option>
<option value="28">Handling</option>
</select>
</div>
<div class="form-group scopes gots" id="gots">
<label for="gotsselect">Select GOTS Scope</label>
<span class="bg-danger">{{ $errors->first('gotsselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="gotsselect">
<option selected></option>
<option value="17">Dry</option>
<option value="18">Wet</option>
<option value="19">Trading</option>
<option value="20">Inputs</option>
</select>
</div>
<div class="form-group scopes te" id="te">
<label for="teselect">Select TE Scope</label>
<span class="bg-danger">{{ $errors->first('teselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="teselect">
<option selected></option>
<option value="25">OE</option>
<option value="26">OCS</option>
</select>
</div>
<div class="form-group scopes cor" id="cor">
<label for="corselect">Select COR Scope</label>
<span class="bg-danger">{{ $errors->first('corselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="corselect">
<option selected></option>
<option value="29">Crops</option>
</select>
</div>
<div class="form-group scopes jas" id="jas">
<label for="jasselect">Select JAS Scope</label>
<span class="bg-danger">{{ $errors->first('jasselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="jasselect">
<option selected></option>
<option value="11">Crops</option>
<option value="12">Handling</option>
<option value="13">Repack Crops</option>
<option value="14">Repack Food</option>
<option value="15">Feed</option>
<option value="16">Repack Feed</option>
<option value="30">Wild Harvest</option>
</select>
</div>
<div class="form-group scopes npop" id="npop">
<label for="npopselect">Select NPOP Scope</label>
<span class="bg-danger">{{ $errors->first('npopselect') }}</span>
<select name="scope_id" class="form-control custom-select" id="npopselect">
<option selected></option>
<option value="21">Crops</option>
<option value="22">Livestock</option>
<option value="23">Processing</option>
<option value="24">Trading</option>
</select>
</div>
I have a signup modal form and I want the users to get an alert message if there are fields empty when they press the register button.
I can't really figure it out how to do it.
As I said in my previous posts I am new to coding so please be patient with me.
Thank you!
<div class="modal fade" id="signUp" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="text-center"><i class="fa fa-user-plus" aria-hidden="true"></i> Registro</h3>
</div>
<div class="modal-body">
<form action="" name="registerform" id="signup1" method="POST" role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="name"><i class="fa fa-user-circle" aria-hidden="true"></i> Nombres</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Ingresa tu(s) nombre(s)">
<span id="nameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lname"><i class="fa fa-user-circle" aria-hidden="true"></i> Apellidos</label>
<input type="text" class="form-control" id="lname" name="lname" placeholder="Ingresa tus apellidos">
<span id="lnameerror" class="hidden form-error"><p> *Solo pueden ser letras</p> </span>
</div>
</div>
</div>
<div class="form-group" id="genero">
<div class="btn-group" data-toggle="buttons">
<label for="masculino" class="btn btn-default active">
<input type="radio" name="genero" id="masculino" autocomplete="off" checked value="M">
Masculino
</label>
<label for="femenino" class="btn btn-default">
<input type="radio" name="genero" id="femenino" autocomplete="off" value="F">
Femenino
</label>
</div>
</div>
<div class="form-group">
<label for="email"><i class="fa fa-envelope-o" aria-hidden="true"></i> Correo electronico</label><span id="resultmail"></span>
<input type="email" class="form-control" name="email" id="email" placeholder="Ingresa tu correo electronico" autocomplete="off">
</div>
<div class="form-group">
<label for="user"><i class="fa fa-user" aria-hidden="true"></i> Usuario</label><span id="result"></span>
<input type="text" class="form-control" name="user" id="user" placeholder="Ingresa tu usuario" autocomplete="off">
</div>
<div class="form-group">
<label><i class="fa fa-birthday-cake" aria-hidden="true"></i> Fecha de nacimiento</label>
<div class="row" id="fecha">
<div class="col-xs-4">
<select class="form-control btn-default custom" name="day">
<option hidden>Dia</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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="month">
<option hidden>Mes</option>
<option value="01">Enero</option>
<option value="02">Febrero</option>
<option value="03">Marzo</option>
<option value="04">Abril</option>
<option value="05">Mayo</option>
<option value="06">Junio</option>
<option value="07">Julio</option>
<option value="08">Agosto</option>
<option value="09">Septiembre</option>
<option value="10">Octubre</option>
<option value="11">Noviembre</option>
<option value="12">Diciembre</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control btn-default custom" name="year">
<option hidden>Año</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1954</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="password"><i class="fa fa-eye" aria-hidden="true"></i> Contrasena</label><span id="resultpass"></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Ingresa tu contrasena" autocomplete="off">
</div>
<div class="form-group">
<label for="cpassword"><i class="fa fa-keyboard-o" aria-hidden="true"></i> Confirma tu contrasena</label><span id="resultcpass"></span>
<input type="password" class="form-control" id="cpassword" name="cpassword" placeholder="Vuelve a ingresar tu contrasena" autocomplete="off">
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnregistrar" name="register" class="btn btn-default" value="Registrar"></input>
<button type="button" id="btncerrar1" id="reset" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</form>
</div>
</div>
I am building a hyrbid app using Ionic and need the dropdown control to update its value while the user is selecting a value. This way the user does not have to click "Done" or tap elsewhere on the screen to update the dropdown. This will also enable the next control. Ideally the user would select a value, the dropdown would update and unlock the other dropdown.
DOM
<div class="col">
<label class="item item-input">
<span class="input-label">When</span>
<input type="date" id="date" name="date" ng-model="postData.when" required>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine}">
<div class="input-label">Location</div>
<select id="location" name="location" ng-init="postData.location=''" ng-disabled="subForm.date.$pristine" ng-model="postData.location" required>
<option value="" disabled hidden></option>
<option value="Denver Office">Denver Office</option>
<option value="DJ Basin">DJ Basin</option>
<option value="East Mediterranean">East Mediterranean</option>
<option value="Gulf of Mexico">Gulf of Mexico</option>
<option value="Houston Office">Houston Office</option>
<option value="Marcellus">Marcellus</option>
<option value="Texas">Texas</option>
<option value="West Africa">West Africa</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
<div class="row">
<div class="col">
<label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$untouched || subForm.location.$untouched}">
<div class="input-label">Observation</div>
<select id="observationList" name="observationList" ng-disabled="subForm.date.$untouched || subForm.location.$untouched" ng-model="postData.category" required>
<option value="" disabled hidden></option>
<option value="Caught Between">Caught Between</option>
<option value="Dropped Object">Dropped Object</option>
<option value="Fall from Height">Fall from Height</option>
<option value="Personal Protective Equipment (PPE)">Personal Protective Equipment (PPE)</option>
<option value="Slip / Trip / Fall">Slip / Trip / Fall</option>
<option value="Strain / Overexertion">Strain / Overexertion</option>
<option value="Struck by">Struck by</option>
<option value="Spill / Release">Spill / Release</option>
<option value="Safe Work Practices">Safe Work Practices</option>
<option value="NO HARM">No Harm</option>
<option value="Other">Other</option>
</select>
</label>
</div>
</div>
I have tried using the different angular validation check properties such as $untouched, $pristine, etc. But each one waits for the dropdown to lose focus.
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');