If you just want the title of #bottom to say 1 on every pageload, same as the #middle select is saying, you can use this:
$('#middle').change(function() {
$('#output').text($(this).find(":selected") ? $(this).find(":selected").text() : $(this).find(":first").text());
}).change(); //trigger change on pageload
$('#middle').change(function() {
$('#output').text($(this).find(":selected") ? $(this).find(":selected").text() : $(this).find(":first").text());
}).change();
<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">Section:</label>
<div class="col-md-8">
<select id="middle" class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
<br /><br />
<div class="form-group">
<label class="col-md-4 control-label" id="output"></label>
<div class="col-md-8">
<select id="bottom" class="form-control">
<option>11</option>
<option>12</option>
<option>13</option>
</select>
</div>
</div>
jsfiddle: https://jsfiddle.net/hgep8hcg/
- This code checks if there is a selected
option, and if so, uses its value. If there is no selected option, it uses the first option's value.
This code, inside .text(), may look a little weird. It's called a ternary operator, click the link if you want to understand it.
IF YOU WANT TO STORE THE SELECTED VALUES, READ ON:
Your easiest option would be localStorage, provided that browser support is sufficient for your goal.
(I use sessionStorage here, just so everybody's localStorage doesn't get bloated with test values.)
This would do the trick:
$("#middle").change(function() {
var value = $(this).find(":selected").text();
$("#output").text(value);
sessionStorage.setItem(this.id, value);
}).val(function(){return (sessionStorage.getItem(this.id) ? sessionStorage.getItem(this.id) : $(this).find("option:first").text());}).change(); //set values on pageload
jsfiddle: https://jsfiddle.net/k3htre4d/2/
codepen: https://codepen.io/anon/pen/OgOdLZ?editors=1010
- In your
change handler, I set the localStorage, using the select's ID as the key, and the select's text-value as value.
- After the
change handler, I set the select's value, using the localStorage key that matches the select's ID, if that key exists. If it doesn't exist, I use the select's first option's text.
That's this line: return (... ? ... : ...);. It's called a ternary operator, click the link if you want to understand it.
MORE EFFICIENT MIGHT BE:
$("#middle").change(function() {
$("#output").text($(this).find(":selected").text());
});
$(".form-control").change(function() {
sessionStorage.setItem(this.id, $(this).find(":selected").text()); //store select's value on change
}).each(function() {
if (sessionStorage.getItem(this.id)) {$(this).val(sessionStorage.getItem(this.id));} //set select's value on pageload
}).change(); //trigger change on pageload
jsfiddle: https://jsfiddle.net/k3htre4d/1/
codepen: https://codepen.io/anon/pen/dRZayW?editors=1010
- In this code the values of all the
selects with class form-control are stored into localStorage on change. All the selects get their own key in localStorage based on their ID. So now you don't have to duplicate the handler for every single select. Just make sure every select you wish to store the value for, has class form-control (or whatever class you choose).
Using this principle, you could also add an extra class to only those selects that you wish to store the values for, and than use that class for the handler instead of .form-control.
- The code that is only used by the
#middle select, is in a separate handler.
