如何使用JavaScript获取AJAX的select值

我有两个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>

从上面可以看到，第二个select使用静态值“alllocations”作为onchange函数的第一个参数

如何将此静态值替换为第一个下拉列表位置的所选选项

我尝试了撤退，但没有成功

感谢您的帮助。

您可以使用：

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

您的代码将成为：

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

演示：

函数filterRetreatsvalue1，value2{ console.logvalue1、value2； } 过滤器： 所有地点 2. 排序方式： 人气 年龄 费用