0

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

我有一个带有 2 个显示隐藏内容的下拉菜单的脚本。我正在使用此示例 根据 jquery 中的选择下拉 ID 更改内容

当我执行 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

4

1 回答 1

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>
于 2012-12-03T00:47:08.243 回答