選擇下拉菜單時觸發Jquery事件（不更改下拉菜單值）

Question

嗨，我有一個jquery函數，我想在選擇下拉列表值時觸發（不是單擊時，而不是更改時-而是選擇任何值時）

這是HTML

<select class="addpropertyinput" name="property_availablefor" id="property_availablefor" required>
    <option value="">Available for</option>
    <option value="Rent">Rent</option>
    <option value="Sale">Sale</option>
</select>
<div class="errormsg" id="errormsg3"></div>

jQuery的

var validate_property_availablefor = function()
{
    var item3 = $("#property_availablefor").val();
    $("#errormsg14").html("")
    $("#errormsg21").html("")
    if (item3 == '')
    {
        $("#errormsg3").html("Please Select Available For")
        property_availablefor = "";
    }
    else
    {
        $("#errormsg3").html("")
        property_availablefor = item3;
    }
}

   $("#property_availablefor").on('change', validate_property_availablefor);

現在，我可以將“ change”替換為“ click”或“ focusout”，但這並不能完美解決問題，因為一旦單擊或聚焦，它就會立即觸發。 在下拉列表中選擇值時，我需要將其觸發。 不更改，單擊下拉菜單時不更改。 僅在選擇下拉值時。

Answer 1

不是所有瀏覽器都支持<option>事件（我只確認它在firefox上有效）。 保留當前的更改事件，但還要添加一個單擊事件，該事件僅在選擇為空白時才響應：

 var validate_property_availablefor = function() { var item3 = $("#property_availablefor").val(); $("#errormsg14").html("") $("#errormsg21").html("") if (item3 == '') { $("#errormsg3").html("Please Select Available For") property_availablefor = ""; } else { $("#errormsg3").html("") property_availablefor = item3; } } $("#property_availablefor").on('change', validate_property_availablefor); $("#property_availablefor option").on('click', function(event){ var selectedVal = $(this).val(); console.log(selectedVal); if (selectedVal === '')//only do something when it's blank { $("#errormsg3").html("Please Select Available For") property_availablefor = ""; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="addpropertyinput" name="property_availablefor" id="property_availablefor" required> <option value="">Available for</option> <option value="Rent">Rent</option> <option value="Sale">Sale</option> </select> <div class="errormsg" id="errormsg3"></div>