Question

在继续表单之前，用户应选择下拉菜单中的一个选项。如果未选择任何选项，“下一步按钮”应发送警报。 Yes和No都应该允许下一个按钮工作。我需要一个JavaScript。

这是我的HTML：

<fieldset>
    <h2 class="fs-title">Past History </h2>
    <h3 class="fs-subtitle">Please select one of the following</h3>
    <div>
        <select name="past" id="past">
            <option value=""disabled selected>Select One</option>
            <option value="a">Yes</option>
            <option value="b">No</option>
        </select>
    </div>
    <br>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" id="nextpast" value="Next" />
</fieldset>

Answer 1

如果您只是使用javascript，只需为该按钮添加一个监听器：

var $nextButton = document.getElementById('nextbutton');
$nextButton.addEventListener('click', nextButtonfunc);

var nextButtonfunc = function() {
var $dropDownPast = document.getElementById('past');
 if ($dropDownPast.value === '') alert('message')
}

这是你需要的吗？

Answer 2

这个工作正常，不会让用户继续，除非他们选择了一个选项

function alertBox() {
    if($("#past option:selected").text() == "Select One"){
        alert("You must select an option!");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
    <h2 class="fs-title">Past History </h2>
    <h3 class="fs-subtitle">Please select one of the following</h3>
    <div>
        <select name="past" id="past">
            <option value=""disabled selected>Select One</option>
            <option value="a">Yes</option>
            <option value="b">No</option>
        </select>
    </div>
    <br>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" onclick="alertBox()" name="next" id="next" class="next action-button" id="nextpast" value="Next" />
</fieldset>

Answer 3

 document.querySelector("input[name='previous']").addEventListener('click',mainAction)
        document.querySelector("input[name='next']").addEventListener('click',mainAction)

        function mainAction(){
            if($('select option:selected').val() == 'a' || $('select option:selected').val() == 'b'){
                //do ur stuff
            }else{
                alert('Please select A or B');
            }
        }

按下菜单验证按下按钮w / Alert

3 个答案: