Cannot get value from select (JS)

Question

I have Form with several selects

Here is code

<form>
<div class="form-group">
    <label for="recipient-name" class="col-form-label">Ф.И.О</label>
    <input type="text" class="form-control" id="Name">
</div>
<div class="form-group">
    <label for="recipient-name" class="col-form-label">Дата Рождения</label>
    <input type="date" class="form-control" id="birthday">
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Должность:</label>
    <textarea class="form-control" id="position"></textarea>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Телефон:</label>
    <textarea class="form-control" id="telephonepeople"></textarea>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">График работы:</label>
    <select class="form-control" id="workTime">
        <option>Дневная Смена</option>
        <option>Ночная смена</option>
        <option>Сутки</option>
        <option>Дневная -Ночная смены</option>
    </select>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Адрес проживания:</label>
    <textarea class="form-control" id="adress"></textarea>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Регион:</label>
    @Html.DropDownList("Region", null, htmlAttributes: new { @class = "form-control", @id = "region" })
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Паспортные данные:</label>
    <textarea class="form-control" id="passportData"></textarea>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">ИНН:</label>
    <textarea class="form-control" id="INN"></textarea>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Медицинская книга:</label>
    <select class="form-control" id="medicalCard">
        <option>Имеется</option>
        <option>Не Имеется</option>
    </select>
</div>
<div class="form-group">
    <label for="message-text" class="col-form-label">Дата окончания мед книжки:</label>
    <input type="date" class="form-control" id="bookending">
</div>

I need to get values from it and pass to back-end.

I have this javascript code (here is part, where I get values, because all other is working great)

function AddPeople() {
let proposalurl = '/peopleforworks/addpeople';
let Name = $('#Name').val();
let birthday = $('#birthday').val();
let telephone = $('#telephonepeople').val();
let workTime = $('#workTime').text();
let adress = $('#adress').val();
let passportData = $('#passportData').val();
let medicalCard = $('#medicalCard').val();
let INN = $('#INN').val();
let medicalbookdate = $('#bookending').val();
let position = $('#position').val();
let region = $('#region').text();
alert(workTime);

But alert shows me nothing. All other selects are working and values is getting from them.

Where can be my problem?

Thank's for help

Answer 1

You need to define a value for each of your select's <option>:

Replace this:

<select class="form-control" id="workTime">
        <option>Дневная Смена</option>
        <option>Ночная смена</option>
        <option>Сутки</option>
        <option>Дневная -Ночная смены</option>
 </select>

By this:

<select class="form-control" id="workTime">
        <option value="Дневная Смена">Дневная Смена</option>
        <option value="Ночная смена">Ночная смена</option>
        <option value="Сутки">Сутки</option>
        <option value="Дневная -Ночная смены">Дневная -Ночная смены</option>
 </select>

And also:

let workTime = $('#workTime').text();

By this:

let workTime = $('#workTime').val();

Answer 2

use .val()

let workTime = $('#workTime').val();