How to Embed JavaScript in a .vm File

Other Questions JavaScript
1

In my Velocity (.vm) file, I’m looking to implement functionality where selecting an option in one dropdown will disable the other dropdown. Moreover, if the user selects the ‘–Select–’ option, both dropdowns should be enabled again. How can I achieve this?

<div class="form-group">
    <label for="regionId" class="col-sm-2 control-label">Region Name</label>
    <div class="col-sm-8">
        <select id="regionId" name="regionId" class="form-control dropdown-select">
            <option value="">--Select--</option>
            #foreach($region in $regionList)
                <option value="$region.id">${region.name}</option>
            #end
        </select>
        <span class="help-block" id="help-block-region"></span>
    </div>
    <div class="col-sm-2"></div>
</div>
<div class="form-group">
    <label for="cityId" class="col-sm-2 control-label">City Name</label>
    <div class="col-sm-8">
        <select id="cityId" name="cityId" class="form-control dropdown-select">
            <option value="">--Select--</option>
            #foreach($city in $cityList)
                <option value="$city.id">${city.name}</option>
            #end
        </select>
        <span class="help-block" id="help-block-city"></span>
    </div>
    <div class="col-sm-2"></div>
</div>
2

To achieve the functionality you desire within a Velocity template, you can embed a JavaScript snippet directly into your .vm file. Place a <script> tag after your dropdowns and use event listeners to manage the selections. Here’s an approach: add an onchange event for each dropdown to trigger JavaScript functions that check the selected values. If either dropdown has a selected item that’s not the placeholder, disable the other dropdown. To reset both, check for the ‘–Select–’ option and enable both accordingly. This implementation keeps the logic simple and effective within the limitations of Velocity template files.