Question

我的计划中有两种表格。我只想在选择值表单下拉列表后显示每个表单。我尝试了很多次却没能成功。我不是一个编程人员。我还需要从下拉列表中选择的值，即使在重新加载页面后仍然保留。所以，如果有人可以帮助我使用php，javascript或jquery解决这个问题，我会很高兴。

Answer 1

您的部分代码会有所帮助。但也许这会指出你正确的方向（这使用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>

Answer 2

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

第一个解决方案是直接的Javascript（在这种情况下是jQuery）：

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

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

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

Answer 3

<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();
});

demo

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

3 个答案: