javascript - 我想在值更改时验证下拉菜单，而不是在提交按钮单击时验证

Question

我已经编写了这段代码来获取下拉菜单提交时的数据，它在点击提交按钮时起作用，但现在我希望它只在下拉菜单中的值变化时起作用，这是我的工作代码。

<script language="javascript">
    function validFormDataCity() {
        if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
            alert("Please select a City.");
            document.citysearch.jobsbycitymenu.focus();
            return false;
        }
    }
</script>   

<div id='jobsbycity'>
    <form id="citysearch" name="citysearch" method="POST" action="jobs-by-city-results">
        <p id='jobsbycitytitle'>Jobs by City</p>
        <select name="city" id='jobsbycitymenu'>
            <option value="Not Selected">---Select City---</option>
            <option value='Abbottabad'>Abbottabad</option>
            <option value='Arifwala'>Arifwala</option>
            <option value='Attock'>Attock</option>
            <option value='Badin'>Badin</option>
        </select>
        <input type="submit" name="Submit" value=" Go " id='jobsbycitymenubtn' onclick="return validFormDataCity();"/>
    </form>
</div>                                 

非常感谢你的帮助

Answer 1

由于您正在标记 jQuery，因此您可以使用:

$('#jobsbycitymenu').on('change', function(){
   $(this).closest('form').submit(); 
});

所以你的整个代码(请删除内联脚本)将是:

$(function () {
    $('#jobsbycitymenu').on('change', function () {
        if (validFormDataCity()) $(this).closest('form').submit();
    });
    $('#citysearch').submit(function (e) {
        e.preventDefault;
        return validFormDataCity();
    });

    function validFormDataCity() {
        if (document.getElementById("jobsbycitymenu").value == "Not Selected") {
            alert("Please select a City.");
            document.citysearch.jobsbycitymenu.focus();
            return false;
        }
        return true
    }
});

Demo

对于纯 Javascript，您可以使用 this .