How to add value of option from js code to request?

Have a problem with adding value to general request of my filter.

There is a code, which adds the selected value to the input:

$(document).on('click', '.genre-list option', function () {
    $(this).closest(".genre-label").find("#genre").val($(this).text()).blur();
    onSelect($(this).text())
});

It works correctly, BUT in request it adds text(), but I want add value.

Here is my blade.php code for li options with values:

<label class="genre-label" style="position:relative"><i class="fa-close close-tag-tabs"></i>
    <input type="text" name="genre" class="magic-class filter-input" id="genre" 
        placeholder="{{ __('main.tags_genre')}}" autocomplete="off">
    <ul class="genre-list" id="genre-list">
        <li><option value="action">{{ __('main.action') }}</option></li>
        <li><option value="adventure">{{ __('main.adventure') }}</option></li>
        <li><option value="adventures">{{ __('main.adventures') }}</option></li>
        <li><option value="anime">{{ __('main.anime') }}</option></li>
    </ul>
</label>

It's works good with english language, but my site have 10 languages yet, and in moment of changing language I have a problem with general filter request, which cath text(), and not a value that is unified for all languages.

How to fix it correctly?