在选择选项上放置警报

Placing an alert on select options

本文关键字：选择 选项      更新时间：2023-09-26

我有一个带有select和许多选项的表单。在选项中，根据您选择的选项，它将显示不同的形式。

我的查询是，如果用户开始填写表格，然后选择另一张表格，我需要在选择另一个选项时添加警报，如果他们同意，则清除他们已经开始填写的表格。

这可能吗？

$("select").change(function () {
$('div.box').hide();
    $('div.box.'+$(this).val()).show();
});

<h2>SELECT YOUR TEST!</h2>
                <select id=a>
                    <option value="chem">Chemical Analysis Testing Request Form</option>
                    <option value="fat">Fatigue Testing Request Form</option>
                    <option value="hard">Hardness Testing Request Form</option>
                    <option value="neutral">Neutral Salt Spray Testing Request Form</option>
                    <option value="stress">Stress Corrosion Testing Request Form</option>
                    <option value="tensile">Tensile Testing Request Form</option>
                </select>                             


                <!-- Test One -->

                <div class="chem box">
                <h2>Chemical Analysis Testing Request Form</h2>

                <label>Accreditation / Approval required:</label><br>
                <input type="checkbox" value="ISO17025/UKAS">ISO17025/UKAS<br>
                <input type="checkbox" value="Nacap">Nacap <br>
                <input type="checkbox" value="other">Other 
                <br>
                <br>
                <br>
                <label>Material / Allow type:</label>
                <input type="text">
                <br>
                <br>
                <br>                
                <label>Can a Drawing be Supplied:</label><br>

                Yes<input type="radio" onclick="yesnoCheck();" name="yesno" id="yesCheck"> 
                No<input type="radio" onclick="yesnoCheck();" name="yesno" id="noCheck">
                <br>       
                <div id="ifYes" style="display:none">               
                Image upload: <input type='file' id='yes' name='yes'><br>
                </div>
                <div id="ifNo" style="display:none">
                If no can you sepcify form and dimensions:<br>
                <textarea type='text' id='other3' name='other3'></textarea><br>



                </div>

这里有一个演示：演示小提琴

试试这个：示例和示例在这里有明确的形式

var isFormChanged = false;
$("select").change(function () {
    var type = $(this).val();
if(isFormChanged)
{
 var sure= confirm ('Your changes will be lost, proceed?');
    if(sure)
    {
        $('div.box.active').find('input[type=text]').val('');
        $('div.box.active').find('input[type=radio],[type=checkbox]').prop('checked',false);
       showForm(type);
    }else
    {
        return false;
    }
}
   showForm(type); 
});
function showForm(type)
{
    $('div.box').removeClass('active').hide();
    $('div.box.'+type).show().addClass('active');
    isFormChanged = false;
}
$('div.box').find('input').on('change',function(){
isFormChanged = true;
});

您可以使用确认框：

if ( confirm("Do you want to clear the form") ) {
    // process logic for hiding and showing new forms
}

更新的Fiddle

如果你不想使用内置的确认，那么你要么需要设计自己的弹出窗口，要么使用类似jQuery UI对话框的东西。

相关文章：