I have 2 HTML drop down menus.
<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>
As you can see from the above, the second select uses the static value 'alllocations' as the first parameter for the onchange function.
How can I replace this static value with the selected option of the first dropdown (retreat_locations)?
I tried retreat_locations.value but it didn't work.
Any help appreciated.
You can use:
document.querySelector('[name=retreat_locations]').value
Your code will become:
filterRetreats(document.querySelector('[name=retreat_locations]').value, this.value)
Demo:
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>
Other -old school- option is to add an id
tag to the first select, eg id="retreat_locations"
and use document.getElementById('retreat_locations').value
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.