根据下拉列表中的选定值显示表单

Displaying a form according to the selected value from dropdown list

本文关键字：显示 表单 下拉列表      更新时间：2023-09-26

我的程序中需要填写两张表格。我只想在选择值表单下拉列表后显示每个表单。我尝试了很多次，但没有成功。我不是一个编程的人。此外，即使在重新加载页面后，我也需要保留从下拉列表中选择的值。因此，如果有人可以帮助我使用php，javascript或jquery解决此问题，我将很棒。

你的一些代码会有所帮助。但也许这会为你指明正确的方向(这使用 jQuery(：

<select name="formType" id="formType">
    <option value="Type A">Type A</option>
    <option value="Type B">Type B</option>
</select>
...
<form id="formA">
    ...
</form>
<form id="formB">
    ...
</form>
<script type="text/javascript">
$(function() {//on document load
    $('#formA').hide();
    $('#formB').hide();
    $('#formType').change(function(){
        showForm($(this).val());
    });
});
function showForm(myFormType){
    if(myFormType == 'Type A'){
        $('#formA').show();
    }
    else{
        $('#formB').show();
    }
}
</script>

解决方案取决于您是希望在页面上同时显示两个表单，并且显示的表单将根据选择而更改，还是希望重新加载页面以显示正确的表单。

第一个解决方案是简单的Javascript(在这种情况下是jQuery(：

$(document).ready(function () {
    $('.group').hide();
    $('#option1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});

有关完整示例，请参阅 http://jsfiddle.net/eYzSb/。

第二个解决方案可以用 Ajax 或 PHP 完成，我稍后会更新这个答案。

<select>
<option value="" selected="selected"></option>
<option value="form_1">Form 1</option>
<option value="form_2">Form 2</option>
<option value="form_3">Form 3</option>
</select>
<form name="form_1" id="form_1" style="display:none">
<input type="text" value="1">
</form>
<form name="form_2" id="form_2" style="display:none">
<input type="text" value="2">
</form>
<form name="form_3" id="form_3" style="display:none">
<input type="text" value="3">
</form>

.JS：

$("select").on("change", function() {    
    $("#" + $(this).val()).show().siblings().hide();
});

演示

相关文章：