I need assistance with handling multiple select menus on a View page
Below is a snippet of the code:
$(function() {
var selectSpeed = $('#speed'),
selectTest = $('#test');
selectSpeed.selectmenu();
selectTest.selectmenu();
$("#speed-button").on("mousedown", function() {
selectSpeed.selectmenu("open");
});
$('#speed-button').on("click", function() {
selectSpeed.selectmenu("open");
});
$(document).on("mouseup", "#speed-menu .ui-menu-item-wrapper", function() {
selectSpeed.val($(this).text().substr(0, 1)).change();
selectSpeed.selectmenu("close");
selectSpeed.selectmenu("refresh");
});
$("#test-button").on("mousedown", function() {
selectTest.selectmenu("open");
});
$('#test-button').on("click", function() {
selectTest.selectmenu("open");
});
$(document).on("mouseup", "#test-menu .ui-menu-item-wrapper", function() {
selectTest.val($(this).text().substr(0, 1)).change();
selectTest.selectmenu("close");
selectTest.selectmenu("refresh");
});
});fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
.overflow {
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="demo">
<form action="#">
<fieldset>
<select name="speed" id="speed">
<option selected="selected" value="1">1 adult</option>
<option value="2">2 adults</option>
<option value="3">3 adults</option>
<option value="4">4 adults</option>
<option value="5">5 adults</option>
<option value="6">6 adults</option>
<option value="7">7 adults</option>
<option value="8">8 adults</option>
<option value="9">9 adults</option>
</select>
<select name="test" id="test">
<option selected="selected" value="1">1 test</option>
<option value="2">2 test</option>
<option value="3">3 test</option>
<option value="4">4 test</option>
<option value="5">5 test</option>
<option value="6">6 test</option>
<option value="7">7 test</option>
<option value="8">8 test</option>
<option value="9">9 test</option>
</select>
</fieldset>
</form>
</div>Functionality of this code:
When I click on a span, it triggers the selectmenu to open. While still holding the mouse button down, I can move to a select field value (e.g., 2 adults in the first selectmenu) and release the mouse button to update the span accordingly.
Required Action:
For each new field, I have to define a new variable like var selectAnyone = $('#anyone'), apply .selectmenu() to it, and then create a new event listener with $(document).on("mouseup",, and repeat this process for every new field.
How can I streamline this code to handle all future fields in a unified way?