JQuery Dropdown Menu + PHP - сохранение выбора

Я не очень опытен в JS (PHP - моя сильная сторона), поэтому мне нужна ваша помощь в чем-то.

У меня есть скрипт с двумя выпадающими меню, который показывает скрытый контент. Я использую этот пример Изменение содержимого на основе выбора выпадающего идентификатора в 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

Источник

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>
Источник
Другие вопросы по тегам