I currently have a HTML select drop down with six options all I'm trying to achieve is when the option "Other" is selected a javascript alert appears, but for some reason I cannot get this to work.
I've tried moving the onclick to the select tag rather than the option tag, and moving the alert outside the parameters which allows it to appear as soon as the drop down is clicked which worked but isn't what I'm trying to achieve.
function otherPayment() { var paymentType = document.getElementById("paymentType").value; if (paymentType == "Other") { alert("test"); } }
<div class="form-group"> <label for="paymentType">Payment Type:</label> <select class="form-control" id="paymentType" name="paymentType" required> <option value="">-</option> <option value="Payment (Initial)">Payment (Initial)</option> <option value="Payment (Full)">Payment (Full)</option> <option value="Payment (Balance)">Payment (Balance)</option> <option value="Delivery Fee">Delivery</option> <option onclick="otherPayment()" value="Other">Other</option> </select> </div>
<option>
elements don't behave like normal HTML elements, so onclick
doesn't do anything.
The easiest way to do this is to use the onchange
event of the select, and then inspect the newly selected element, like this:
function handlePaymentChange(event) { var paymentType = event.target.value; if (paymentType == "Other") { alert("test"); } }
<div class="form-group"> <label for="paymentType">Payment Type:</label> <select class="form-control" id="paymentType" name="paymentType" required onchange="handlePaymentChange(event)"> <option value="">-</option> <option value="Payment (Initial)">Payment (Initial)</option> <option value="Payment (Full)">Payment (Full)</option> <option value="Payment (Balance)">Payment (Balance)</option> <option value="Delivery Fee">Delivery</option> <option value="Other">Other</option> </select> </div>
You have to use onchange
on the select
tag not on the option
tag.
function otherPayment() { var paymentType = document.getElementById("paymentType").value; if (paymentType == "Other") { alert("test"); } }
<div class="form-group"> <label for="paymentType">Payment Type:</label> <select class="form-control" id="paymentType" name="paymentType" required onchange="otherPayment()"> <option value="">-</option> <option value="Payment (Initial)">Payment (Initial)</option> <option value="Payment (Full)">Payment (Full)</option> <option value="Payment (Balance)">Payment (Balance)</option> <option value="Delivery Fee">Delivery</option> <option value="Other">Other</option> </select> </div>
The easiest way to do this would be to use onselect
:
<div class="form-group">
<label for="paymentType">Payment Type:</label>
<select class="form-control" id="paymentType" name="paymentType" onselect="otherPayment()" required>
<option value="">-</option>
<option value="Payment (Initial)">Payment (Initial)</option>
<option value="Payment (Full)">Payment (Full)</option>
<option value="Payment (Balance)">Payment (Balance)</option>
<option value="Delivery Fee">Delivery</option>
<option value="Other">Other</option>
</select>
</div>
Since there is already an if/else
, it should work well.
我建议绑定下拉列表的onchange事件而不是选项的click事件。
<select class="form-control" id="paymentType" onchange="otherPayment()" name="paymentType" required>
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.