最受欢迎

在下拉菜单中设置函数onchange-PHP

set function onchange in dropdown - PHP

本文关键字：函数 onchange-PHP 设置 下拉菜单 | 更新日期: 2023-09-27

我有一个下拉列表，当用户选择一个值时，将根据所选值显示不同的表单。我的文件是html格式的。我正在使用引导程序进行设计。

这是我的样本代码：

<form name="exmType" method = "POST">
<select class="form-control" name="txtType" class="select" method = "post"
onChange="this.form.submit();" style="width:300px;">
    <option value="">Option A</option>
    <option value="1">Option B</option>
    <option value="2">Option C </option>    
<?php
if (isset($_POST['txtType'])) {
if ( $_POST['txtType'] == "" ){
       *display form a*
} elseif ( $_POST['txtType'] == 1 ){
        *display form b*
 } elseif ( $_POST['txtType'] == 2 ){
        *display form c*
 }
}
?>
  </select>
</form>

这里有一个简单的代码示例，您可以根据自己的需要进行处理。

代码非常简单，所以如果你有任何问题，请发表评论，我看不出有任何理由详细说明它的作用。

$(document).ready(function() {
    $('select').change(function(){
        if($(this).val() == '0') {
           $('form').css('display','none');
        }
        if ($(this).val() == '1') {
           $('form').css('display','none');
           $('#form_a').css('display','block');
        }
        if($(this).val() == '2') {
           $('form').css('display','none');
           $('#form_b').css('display','block');
        }
        if($(this).val() == '3') {
           $('form').css('display','none');
           $('#form_c').css('display','block');
        }
    });
});
form {
    display: none; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option value="0">-- Choose Form --</option>
    <option value="1">Form A</option>
    <option value="2">Form B</option>
    <option value="3">Form C</option>
</select>
<form id="form_a" method="post" role="form">
    Form a: <input type="text" value="form_a_text"/>
</form>
<form id="form_b" method="post" role="form">
    Form b: <input type="text" value="form_b_text"/>
</form>
<form id="form_c" method="post" role="form">
    Form c: <input type="text" value="form_c_text"/>
</form>

您应该尝试使用Jquery:

<script>
$('form select[name=txtType]').change(function(){
  if ($('form select option:selected').val() == '1'){
    $('#optionA').show();
  }else{
    $('#optionA').hide();
  }
});
$('form select[name= txtType]').change(function(){
  if ($('form select option:selected').val() == '2'){
    $('#optionB').show();
  }else{
    $('#optionB ').hide();
  }
});
</script>

您可以找到Jquery：http://jsfiddle.net/ecZrE/

一些不错的答案：如果使用jquery 选择了下拉项，则显示表单字段

Javascript：试图根据下拉值显示不同的形式？

下拉菜单选择可编辑将显示的表格

根据下拉框选择显示表单的不同元素

首先，您的select标记有两个class=。选择正确的。

   `<select class="form-control"       name="txtType" class="select" method =       "post"
   onChange="this.form.submit();"         style="width:300px;">
<option value="">Option A</option>
<option value="1">Option B</option>
<option value="2">Option C </option>`

要添加onClick或onChange事件，请使用以下函数。在添加之前，最好将id添加到select标记中。

$('#select_tag_id').change(function(){ $('#form_id_to_display').show('slow'); $('#form_id_to_hide').hide('slow'); });

在首页或页面底部添加以上代码。

抱歉排列错误。通过手机发帖。编辑选项有限。

相关文章：