Dropdown list with submit button

Use jquery to obtain the value of the item selected in the dropdown

by Nic Scozzaro

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<form class="my-form">
<select id="unit">
    <option selected disabled>Unit</option>
    <option value="sydney">Sydney</option>
    <option value="melbourne">Melbourne</option>
    <option value="cromwell">Cromwell</option>
    <option value="queenstown">Queenstown</option>
</select>
<select id="module">
    <option selected disabled>Module</option>
    <option value="roger">roger</option>
    <option value="dodger">dodger</option>
    <option value="pip">pip</option>
    <option value="pap">pap</option>
</select>
<select id="module">
    <option selected disabled>Lesson</option>
    <option value="roger">roger</option>
    <option value="dodger">dodger</option>
    <option value="pip">pip</option>
    <option value="pap">pap</option>
</select>
<select id="module">
    <option selected disabled>Choose one</option>
    <option value="roger">roger</option>
    <option value="dodger">dodger</option>
    <option value="pip">pip</option>
    <option value="pap">pap</option>
</select>
<input type="submit" value="Submit">
</form>

JavaScript

$('.my-form').on('submit', function () {
    selectedUnit =  $("#unit").val();
    selectedModule =  $("#module").val();
        
    alert(selectedUnit+selectedModule);
    return false;
});