Form submit 提交后保留所有选定值_Form Submit_Cascadingdropdown

Form submit 提交后保留所有选定值

Form submit 提交后保留所有选定值,form-submit,cascadingdropdown,Form Submit,Cascadingdropdown,我一直在使用以下脚本： index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

我一直在使用以下脚本：

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="includes/css/style.css" type="text/css" rel="stylesheet" />
        <link href="includes/css/wt-gallery.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="includes/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="includes/js/configuratie.js"></script>
        <script type="text/javascript" src="includes/js/jquery.wt-gallery.min.js"></script>
        <script type="text/javascript">
$(document).ready(function() {
    $('#wait_1').hide();
    $('#drop_1').change(function(){
      $('#wait_1').show();
      $('#result_1').hide();
      $.get("func.php", {
        func: "drop_1",
        drop_var: $('#drop_1').val()
      }, function(response){
        $('#result_1').fadeOut();
        setTimeout("finishAjax('result_1', '"+escape(response)+"')", 400);
      });
        return false;
    });
    $('#wait_2').hide();
    $('#drop_2').change(function(){
      $('#wait_2').show();
      $('#result_2').hide();
      $.get("func.php", {
        func: "drop_2",
        drop_var: $('#drop_2').val()
      }, function(response){
        $('#result_2').fadeOut();
        setTimeout("finishAjax2('result_2', '"+escape(response)+"')", 400);
      });
        return false;
    });
    $('#wait_3').hide();
    $('#drop_3').change(function(){
      $('#wait_3').show();
      $('#result_3').hide();
      $.get("func.php", {
        func: "drop_3",
        drop_var: $('#drop_3').val()
      }, function(response){
        $('#result_3').fadeOut();
        setTimeout("finishAjax3('result_3', '"+escape(response)+"')", 400);
      });
        return false;
    });
});

function finishAjax(id, response) {
  $('#wait_1').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax2(id, response) {
  $('#wait_2').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax3(id, response) {
  $('#wait_3').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

function finishAjax_tier_three(id, response) {
  $('#wait_2').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax_tier_four(id, response) {
  $('#wait_3').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
function finishAjax_tier_five(id, response) {
  $('#wait_4').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}
</script>
        </head>
<?php
$website = "it";
    // configuratie file en db connect
include "includes/inc/config.inc.php";
include('db.php');
include_once "class/slider.class.php";
include('func.php');
$slideralbum = new slideralbum($dbo);
$sliders = $slideralbum->getSliderItems($website);
?>
<body>
<p>
<form name="product" action="" method="post">

    <select name="drop_1" id="drop_1">

      <option value="" selected="selected" disabled="disabled">Selecteer Merk</option>

      <?php getTierOne(); ?>

    </select> 

    <span id="wait_1" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_1" style="display: none;"></span>
    <span id="wait_2" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_2" style="display: none;"></span> 
    <span id="wait_3" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_3" style="display: none;"></span> 
    <span id="wait_4" style="display: none;">
    <img alt="Please Wait" src="ajax-loader.gif"/>
    </span>
    <span id="result_4" style="display: none;"></span> 
  <INPUT TYPE="button" VALUE="Refresh" onclick='location.reload()'>
</form>
</p>
<p>
<?php if(isset($_POST['submit'])){
    $drop = $_POST['drop_1'];
    $drop_2 = $_POST['drop_2'];
    $drop_3 = $_POST['drop_3'];
    $drop_4 = $_POST['drop_4'];
    $drop_5 = $_POST['drop_5'];
?>
<table border="1" bordercolor="#B5B5B5" style="background-color:#FFFFFF" width="250" cellpadding="3" cellspacing="3">
    <tr>
        <td>Merk:</td>
        <td><?php echo $drop;?></td>
    </tr>
    <tr>
        <td>Model:</td>
        <td><?php echo $drop_2;?></td>
    </tr>
    <tr>
        <td>Bouwjaar:</td>
        <td><?php echo $drop_3;?></td>
    </tr>
    <tr>
        <td>Kleur:</td>
        <td><?php echo $drop_4;?></td>
    </tr>
</table>
<?php
}
?>
<div id="banner-block">       <!-- Begin of Slideshow -->
    <div class="container">          
        <div class="wt-gallery" style="width:920px; height:375px;">
            <div class="main-screen">
                                <?php if(isset($_POST['submit'])){
    $drop = $_POST['drop_1'];
    $drop_2 = $_POST['drop_2'];
    $drop_3 = $_POST['drop_3'];
    $drop_4 = $_POST['drop_4'];
    $drop_5 = $_POST['drop_5'];
?>
                    <img src="images/<?php echo $drop_5;?>" alt="<?php echo $drop_5;?>" width="920" height="360"/>
<?php
                    }
?>
                <noscript>
                <!-- placeholder image when javascript is off -->
                <img src="../images/triworks_abstract27.jpg" alt=""/>
                </noscript>
            </div>
            <div class="cpanel">
            <div class="thumbs-back"></div>                        
                <div class="thumbnails">
                    <ul>
<?php $sliders = $slideralbum->getSliderItems($website, NULL);
foreach($sliders as $slider){
?> 
                        <li effect="none">
                    <div>
                        <a href="<?php echo $slider->slider_img; ?>" height="360" width="720" alt="<?php echo $slider->slider_img; ?>" />
                        <img src="<?php echo $slider->slider_tmb; ?>" height="70" width="125" alt="<?php echo $slider->slider_tmb; ?>" />
                        </a>
                    </div>
                    <div class="data">    
                    </div>
                        </li>
<?php
}
?>  
                    </ul>
                </div>          
            <div class="thumbs-fwd"></div>
        </div>
    </div>  
</div>
</div>
</body>
</html>


$（文档）.ready（函数（）{
$（'#wait_1'）.hide（）；
$（'#drop_1'）。更改（函数（）{
$（'#wait_1'）。show（）；
$（“#结果_1”）.hide（）；
$.get（“func.php”{
func：“放下1”，
drop_var:$（'#drop_1'）.val（）
}，功能（回应）{
$（“#结果_1”）.fadeOut（）；
setTimeout（“finishAjax（'result_1'，'”+转义（response）+'）”，400）；
});
返回false；
});
$（'#wait_2'）。隐藏（）；
$（'#drop_2'）。更改（函数（）{
$（'#wait_2'）。show（）；
$（“#结果_2”）.hide（）；
$.get（“func.php”{
func：“放下2”，
drop_var:$（'#drop_2'）.val（）
}，功能（回应）{
$（“#结果_2”）.fadeOut（）；
setTimeout（“finishAjax2（'result_2'，'”+转义（response）+'）”，400）；
});
返回false；
});
$（'#wait_3'）。隐藏（）；
$（'#drop_3'）。更改（函数（）{
$（'#wait_3'）。show（）；
$（“#结果_3”）.hide（）；
$.get（“func.php”{
func:“放下3”，
drop_var:$（'#drop_3'）.val（）
}，功能（回应）{
$（“#结果_3”）.fadeOut（）；
setTimeout（“finishAjax3（'result_3'，'”+转义（response）+'）”，400）；
});
返回false；
});
});
函数finishAjax（id，响应）{
$（'#wait_1'）.hide（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}
函数finishAjax2（id，响应）{
$（'#wait_2'）。隐藏（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}
函数finishAjax3（id，响应）{
$（'#wait_3'）。隐藏（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}
函数finishAjax\u第三层（id，响应）{
$（'#wait_2'）。隐藏（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}
函数finishAjax\u第四层（id，响应）{
$（'#wait_3'）。隐藏（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}
函数finishAjax\u第五层（id，响应）{
$（'#wait_4'）。隐藏（）；
$（'#'+id）.html（unescape（response））；
$（'#'+id）.fadeIn（）；
}

选择者梅克


默克：
型号：
布贾尔：
克莱尔：
“alt=”“width=“920”height=“360”/>

func.php

<?php
//**************************************
//     Page load dropdown results     //
//**************************************
function getTierOne()
{
    $result = mysql_query("SELECT DISTINCT make FROM vehicles ORDER BY make ASC") 
    or die(mysql_error());

      while($tier = mysql_fetch_array( $result )) 

        {
?>
<option value="<?php echo $tier['make'];?>"<?php echo (isset($_POST['drop_1']) && $_POST['drop_1'] == $tier['make']) ? ' selected="selected"' : '' ; ?>><?php echo $tier['make'];?></option>
<?php

        }

}

//**************************************
//     First selection results     //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_1" ) {
drop_1($_GET['drop_var']);
}

function drop_1($drop_var)
{  
    include_once('db.php');
    $result = mysql_query("SELECT DISTINCT model FROM vehicles WHERE make='$drop_var' ORDER BY model") 
    or die(mysql_error());

    echo '<select name="drop_2" id="drop_2">
          <option value=" " disabled="disabled" selected="selected">Selecteer Model</option>';

           while($drop_2 = mysql_fetch_array( $result )) 
            {
              echo '<option value="'.$drop_2['model'].'">'.$drop_2['model'].'</option>';
            }

    echo '</select>';
    echo "<script type=\"text/javascript\">
$('#wait_2').hide();
    $('#drop_2').change(function(){
      $('#wait_2').show();
      $('#result_2').hide();
      $.get(\"func.php\", {
        func: \"drop_2\",
        drop_var: $('#drop_1').val(),
        drop_var2: $('#drop_2').val()
      }, function(response){
        $('#result_2').fadeOut();
        setTimeout(\"finishAjax_tier_three('result_2', '\"+escape(response)+\"')\", 400);
      });
        return false;
    });
</script>";
}

//**************************************
//     Second selection results     //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_2" ) {
drop_2($_GET['drop_var'], $_GET['drop_var2']);
}

function drop_2($drop_var, $drop_var2)
{  
    include_once('db.php');
    $result = mysql_query("SELECT DISTINCT year FROM vehicles WHERE make='$drop_var' AND model='$drop_var2'") 
    or die(mysql_error());

    echo '<select name="drop_3" id="drop_3">
          <option value=" " disabled="disabled" selected="selected">Selecteer Jaar</option>';

           while($drop_3 = mysql_fetch_array( $result )) 
            {
              echo '<option value="'.$drop_3['year'].'">'.$drop_3['year'].'</option>';
            }

    echo '</select>';
    echo "<script type=\"text/javascript\">
$('#wait_3').hide();
    $('#drop_3').change(function(){
      $('#wait_3').show();
      $('#result_3').hide();
      $.get(\"func.php\", {
        func: \"drop_3\",
        drop_var: $('#drop_1').val(),
        drop_var2: $('#drop_2').val(),
        drop_var3: $('#drop_3').val()
      }, function(response){
        $('#result_3').fadeOut();
        setTimeout(\"finishAjax_tier_four('result_3', '\"+escape(response)+\"')\", 400);
      });
        return false;
    });
</script>";
}

//**************************************
//     Third selection results     //
//**************************************
if (isset($_GET['func'])&& $_GET['func'] == "drop_3" ) {
drop_3($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3']);
}

function drop_3($drop_var, $drop_var2, $drop_var3)
{  
    include_once('db.php');
        $result = mysql_query("SELECT DISTINCT color FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3'") 
    or die(mysql_error());  

    echo '<select name="drop_4" id="drop_4">
          <option value=" " disabled="disabled" selected="selected">Selecteer Kleur</option>';

           while($drop_4 = mysql_fetch_array( $result )) 
            {
                if ($drop_4['color'] != "") {
              echo '<option value="'.$drop_4['color'].'">'.$drop_4['color'].'</option>';
                }
            }

    echo '</select>';
    echo "<script type=\"text/javascript\">
$('#wait_4').hide();
    $('#drop_4').change(function(){
      $('#wait_4').show();
      $('#result_4').hide();
      $.get(\"func.php\", {
        func: \"drop_4\",
        drop_var: $('#drop_1').val(),
        drop_var2: $('#drop_2').val(),
        drop_var3: $('#drop_3').val(),
        drop_var4: $('#drop_4').val()
      }, function(response){
        $('#result_4').fadeOut();
        setTimeout(\"finishAjax_tier_five('result_4', '\"+escape(response)+\"')\", 400);
      });
        return false;
    });
</script>";
}

//**************************************
//     Fourth selection results     //
//**************************************
if(isset($_GET['func'])&& $_GET['func'] == "drop_4" ) {
drop_4($_GET['drop_var'], $_GET['drop_var2'], $_GET['drop_var3'], $_GET['drop_var4']);
}
function drop_4($drop_var, $drop_var2, $drop_var3, $drop_var4)
{  
    include_once('db.php');
        $result = mysql_query("SELECT * FROM vehicles WHERE make='$drop_var' AND model='$drop_var2' AND year='$drop_var3' AND color='$drop_var4'") 
    or die(mysql_error());  



           while($drop_5 = mysql_fetch_array( $result )) 
                {
                if ($drop_5['img'] != "") {
              echo '<input type="checkbox" name="drop_5" id="drop_5" style="display:none;" checked value="'.$drop_5['img'].'"/>';

                }
  }
    echo '<input type="submit" name="submit" value="Submit" />';
}

?>


您正在使用GET请求依次显示每个下拉列表，然后使用POST请求提交已完成的表单。您应该确保在POST请求之后显示所有下拉列表
在index.php中，我认为您可以尝试以下内容：
<span id="result_1" style="display: none;">
    <?php
        if (isset($_POST['submit']) {
            drop_1($_POST['drop_1']);
        }
    ?>
</span>

...

<span id="result_2" style="display: none;">
    <?php
        if (isset($_POST['submit']) {
            drop_2($_POST['drop_1'], $_POST['drop_2']);
        }
    ?>
</span>

...

<span id="result_3" style="display: none;">
    <?php
        if (isset($_POST['submit']) {
            drop_3($_POST['drop_1'], $_POST['drop_2'], $_POST['drop_3']);
        }
    ?>
</span>

etc...


谢谢你的回答…尝试了但没有效果…我甚至不能在提交后保留下拉列表…提交后有东西正在删除它，但我不知道我必须在脚本中更改什么以保持下拉列表可见并保留选定的值…尝试了一整天来解决它，但目前为止没有运气：（我对我的代码做了一点修改，那个版本应该更接近解决方案……但我想你已经修改过了；）这个“东西"提交后删除下拉列表只是重新加载整个页面，而当您在下拉列表中选择一个值时，只有下一个下拉列表会通过AJAX调用更新。您可以像我建议的那样使用$\u POST的值，或者您也可以让submit按钮执行AJAX调用，以仅更新图片。感谢e update！：）我的下拉列表在现在提交后可见，但它们不记得所选的值。。。有什么办法可以解决这个问题吗？：）如果没有的话，非常感谢到目前为止的帮助：在每个drop\N函数中，当您编写的
与相应的$\u POST['drop\N']
变量匹配时，您需要在HTML中写出selected=“selected”
。例如，在drop_3中，您可以编写：echo'.$drop_3['year'.'。小心我的代码中的错误，因为我没有办法测试它！