Как получить значение select для AJAX, используя JavaScript

Question

У меня есть 2 раскрывающихся меню HTML.

<div class="bar-option">
    <label>Filter:</label>
    <form>
        <select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
            <option value="alllocations" selected="selected">All Locations</option>
            <?php foreach ($this->locations as $location) {?>
            <option value="<?=htmlentities($location->retreat_location);?>">
                <?=htmlentities($location->retreat_location);?> </option>
            <?php }?>
        </select>
    </form>
</div>
<div class="bar-option">
    <label>Sort by:</label>
    <select onchange="filterRetreats('alllocations', this.value)">
        <option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
        <option value='retreat_founded_in'>Age</option>
        <option value='total_review_cost'>Cost</option>
    </select>
</div>

Как видно из вышесказанного, второй выбор использует статическое значение 'alllocations' в качестве первого параметра для функции onchange.

Как заменить это статическое значение выбранным параметром первого раскрывающегося списка (retreat_locations)?

Я пытался retreat_locations.value, но он не работал.

Любойпомощь оценена.

Answer 1

Вы можете использовать:

document.querySelector('[name=retreat_locations]').value

Ваш код станет:

filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)

Демо:

function filterRetreats(value1, value2) {
  console.log(value1, value2);
}

<div class="bar-option">
                    <label>Filter:</label>
                    <form>
                        <select name="retreat_locations" onchange="filterRetreats(this.value, 'count(reviews.retreat_id)')">
                            <option value="alllocations" selected="selected">All Locations</option>
                            <option value="2">2</option>
                        </select>
                    </form>
                </div>
                <div class="bar-option">
                    <label>Sort by:</label>
                    <select onchange="filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)">
                        <option selected='selected' value='retreat_number_of_reviews'>Popularity</option>
                        <option value='retreat_founded_in'>Age</option>
                        <option value='total_review_cost'>Cost</option>
                    </select>
                </div>

Другой вариант старой школы - добавить тег id к первому выбору, например, id="retreat_locations" и использовать document.getElementById('retreat_locations').value.