Событие Fire 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); 

Теперь я могу заменить 'изменить' с 'нажмите' или 'focusout', но это не решает проблемы ре rfectly, потому что тогда он срабатывает, как только его щелкают или фокусируют. Мне нужно запустить его, когда в раскрывающемся списке выбрано значение. Не изменяется, а не при нажатии выпадающего меню. Только при выборе выпадающего значения.

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>