I have
<?php
$option_select=function($opt_val){
if($opt_val==$_GET["order"]) {
echo "selected";
}
};
?>
<form name="sort" id="sort" action="matches.php" method="get" style="float:right; margin:10px;">
<select name="order" id="order" class="order_select" onchange="changeSort()">
<option <?php $option_select("last_online"); ?> value="last_online">Last online</option>
<option <?php $option_select("age_asc"); ?> value="age_asc">Age (Young to Old)</option>
<option <?php $option_select("age_desc"); ?> value="age_desc">Age (Old to Young)</option>
<option <?php $option_select("height_asc"); ?> value="height_asc">Height (Short to Tall)</option>
<option <?php $option_select("height_desc"); ?> value="height_desc">Height (Tall to Short)</option>
<option <?php $option_select("created_asc"); ?> value="created_asc">Date subscribed (New to Old)</option>
<option <?php $option_select("created_desc"); ?> value="created_desc">Date subscribed (Old to New)</option>
</select>
<input type="submit" value=" Sort " class="btn btn-info" hidden/>
</form>
<script>
var orderSelector = document.getElementById("order");
orderSelector.options[orderSelector.selectedIndex].text = "Sorted by: " + orderSelector.options[orderSelector.selectedIndex].text;
function changeSort() {
var orderSelector = document.getElementById("order");
orderSelector.options[orderSelector.selectedIndex].text = "Sorted by: " + orderSelector.options[orderSelector.selectedIndex].text;
var orderForm = document.getElementById("sort");
orderForm.submit();
}
</script>
I need the select field to show “Sort by: ” + selected value, however while keeping the value in the dropdown not changed.
I.e. dropdown displayed text says “Sort by: Age (Old to Young)”, while inside the dropdown it’s just “Age (Old to Young)” with the standard check on the left.
An example is ebay or amazon.com.