Question

我在JS方面不是很有经验（PHP是我强有力的一面）所以我需要你的帮助。

我有一个带有2个下拉菜单的脚本，显示隐藏的内容。我正在使用此示例Change content based on select dropdown id in jquery

当我执行PHP脚本时，它会检查错误，如果有错误，它会将用户返回到表单。这个问题是它不会显示隐藏的内容。我可以设置某种PHP变量并将它们放在输入中，如$ selected_one ='selected =“selected”'，下拉菜单将有正确的选择，但jQuery函数不能像那样工作。我认为它提供了某种显示和隐藏内容的课程。

我无法完全了解正在发生的事情，所以我需要你的帮助。任何人都能给我一个如何解决这个问题的提示吗？

这里有一些使视觉可视化的代码

<!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" />
<title>Untitled Document</title>
</head>

<style>
.list_publish, .list_news, option_value {
     display: none;   
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<body>
<?php
$selected_news = '';
$selected_review = '';
$selected_news_text = '';
$selected_news_video = '';

if(isset($_POST['submit_news_text'])){

    $selected_news = 'selected="selected"';
    $selected_news_text = 'selected="selected"';

    $news_title = $_POST['news_title'];

    // Checks blank forms and return error
    if(empty($news_title)) {
        $error_message = 'This field must not be empty!';
        $proceed = false;
    } else {
        $proceed = true;
    }
}

if($proceed){
    // do stuff
    echo 'do stuff';
} else {
?>
<form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
    <select class="change_publish" name="publish_type" id="publish_type" style="width: 238px;">
      <option value="publish_type" data-title="choose">Publishing...</option>
      <option value="publish_news" data-title="news" <?php echo $selected_news ?>>Publish News</option>
      <option value="publish_review" data-title="review" <?php echo $selected_review ?>>Publish Review</option>
    </select>
    <div class="list_publish publish_type"> 
    </div>
    <div class="list_publish publish_news"> 
        <select class="change_news" name="news_type" id="news_type" style="width: 238px;">
          <option value="news_type" selected="selected" data-title="choose">News Type</option>
          <option value="news_text" data-title="text" <?php echo $selected_news_text; ?>>Text</option>
          <option value="news_video" data-title="video"<?php echo $selected_news_video; ?>>Video</option>
        </select>
        <div class="list_news news_type">
        </div>
        <div class="list_news news_text">
            <input name="news_title" type="text" id="news_title">
            <input name="submit_news_text" type="submit" value="Publish" id="submit_news_text" />
        </div>
        <div class="list_news news_video">
            > This function is not available at the moment.
        </div>
    </div>
    <div class="list_publish publish_review">
        > This function is not available at the moment.
    </div>
</form>
<?php
    echo $error_message;
}
?>
<script>
// дропдаун меню
$('.change_publish').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_publish').length;
    $('.list_publish').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
});
$('.change_news').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_news').length;
    $('.list_news').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
});
</script>
</body>
</html>

这是一个演示http://www.demirevdesign.com/public/form.php

Answer 1

在文档加载时触发更改事件，如下所示：

<script>
// дропдаун меню
$('.change_publish').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_publish').length;
    $('.list_publish').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
}).change(); // HERE THE CHANGE

$('.change_news').change(function(){
    var selected = $(this).find(':selected');
    $('.optionvalue').fadeOut(function(){
         $('.optionvalue').html(selected.html()).fadeIn()
             .attr('class', 'optionvalue '+selected.val());   
    });
    var count = $('.list_news').length;
    $('.list_news').slideUp(function(){
        if(!--count) {
           $('.'+selected.val()).slideDown();
        }       
    });
}).change(); // HERE THE CHANGE
</script>

jQuery下拉菜单+ PHP - 保持选择

1 个答案: