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 に答える