-13

selectWeb サイトをモバイルで表示するための要素を使用したいと考えています。次にselectオプションです。

HTML:

<select name="select-choice-8" id="select-choice-nc">
        <optgroup label="News">
            <option value="feature">Fea</option>
            <option value="current">Current</option>
            <option value="research">Research</option>
        </optgroup>

        <optgroup label="Archive">
            <option value="archive">Archive</option>
        </optgroup>

        <optgroup label="Video">
            <option value="">Video</option>
        </optgroup>

        <optgroup label="Submit">
            <option value="">Story</option>
            <option value="">Event</option>
        </optgroup>
    </select>

ページ全体のリロードを回避するために、JavaScript/jQuery を使用して、ユーザーが選択したものに基づいて AJAX 呼び出しを実行したい (たとえば、返された AJAX コンテンツでコンテナーを埋める)。

この問題を解決するには、アイデアや例が必要です。

前もって感謝します。

4

2 に答える 2

0

これを試してください: http://shaquin.tk/experiments/select-ajax2.html。

HTML:

<select name="select-choice" id="select-choice">
    <optgroup label="News">
        <option value="feature">Feature</option>
        <option value="current">Current</option>
        <option value="research">Research</option>
    </optgroup>
    <optgroup label="Archive">
        <option value="archive">Archive</option>
    </optgroup>
    <optgroup label="Video">
        <option value="video">Video</option>
    </optgroup>
    <optgroup label="Submit">
        <option value="story">Story</option>
        <option value="event">Event</option>
    </optgroup>
</select>
<div id="article">Please select an article to view.</div>

JS:

var origText = '';
$(document).ready(function() {
    origText = $('#article').text();
    $('select').on('change', changed);
});
function changed(e) {
    $('#article').html('<span class="loading">Loading...</span>');
    $('#article').load('content.php', $.param({0: e.target.value, 1: origText}));
}

PHP:

<?php
$selected = $_GET[0];
$articles = array(
        '' => $_GET[1],
        'feature' => 'Feature article goes here',
        'current' => '<p>Lorem ipsum dolor sit amet, denique laetare ... se est Apollonius.</p>',
        'research' => 'You selected <code>research</code>',
        'archive' => 'Archives',
        'video' => '<div style="font-size:48pt;font-weight:bold;font-style:italic;background:red;text-align:center;padding:20px;margin:10px;border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px;">Video</div>',
        'story' => 'Submit a story',
        'event' => 'Submit an event'
    );
$article = $articles[$selected];
echo $article;
?>

CSS (オプション):

body {
    background: #ccc;
    text-align: center
}
#article {
    padding: 30px;
    margin: 20px;
    text-align: left;
    background: #eee;
    text-shadow: 1px 1px #fff;
    text-shadow: 0 0 3px #fff;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}
.loading {
    text-transform: uppercase;
    font-size: 15pt;
    text-shadow: 1px 1px #f00, 1px 2px #f00, 2px 2px #f00, 3px 3px #f00;
}

PHP では、おそらくデータベースからテキストを取得したいと思うでしょう: PHP - MySQLi .

于 2012-07-12T23:55:45.137 に答える
0

私は jQuery にはあまり詳しくありませんが、適切な構文を見つけることができるでしょう。アイデアは、選択したオプションに基づいて適切な HTML を取得することです。つまり、それに対応する値です。

testHTML を検討してください:

<div id="News"></div>
<div id="Archive"></div>
<div id="Video"></div>

そして JavaScript:

$.each("option").click(function() {
    var label = $(this).parent.label;
    var elementToUpdate = $( "#" + label ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax({ url: url }).done(function(){
        elementToUpdate.replaceWith( newHTML );
    });
});


または多分:

<div id="selectedContent"></div>

と

$.each("option").click(function() {
    var elementToUpdate = $( "#selectedContent" ); // one of the divs in TestHTML
    var value = (this).value;
    var url = "http://mysite.php?id=" + value;
    var newHTML = $.ajax({ url: url }).done(function(){
        elementToUpdate.replaceWith( newHTML );
    });
});
于 2012-07-12T22:41:39.093 に答える