0

私は (以下でお気づきになると思いますが) プログラマーでもコーダーでもありません。ネットワークのドキュメント マニュアルを書いています。

そうは言っても、私は HTML、php、css などにある程度精通しています。しかし、次のことは私を完全にそして完全に困惑させました：

窮地に立たされている友人のためにサイトを構築しようとしています。他はすべてうまくいっていますが、エンドユーザーを彼らのコミュニティ専用に構築された Web ページにリダイレクトする必要があります。

私が必要としているのは、エンドユーザーが (MySQL クエリを介して) レコードが利用可能なすべての州を一覧表示するドロップダウン メニューをクリックする方法です。最初のメニュー内のオプションを選択すると、2 番目のメニューその州内のコミュニティによって（再びMySQLを介して）入力されます。

役に立つかもしれないものをインターネットで探しましたが、コーディングのロジックについて十分な準備ができていないことがわかりました。ただし、私がやろうとしていることの基本的なバージョンを示す 1 つのサイトを見つけました (こちらを参照) が、MySQL で動作させることができないようです。これは私がこれまでのところです：

脚本 - 

<script>
 function swapOptions(ArrayName) {
       var ExSelect = document.theForm.sites;
       var theArray = eval(ArrayName);
       setOptionText(ExSelect, theArray);
    }

 function setOptionText(theSelect, theArray) {
       for (loop = 0; loop < theSelect.options.length; loop++) {
           theSelect.options[loop].text = theArray[loop];
       }
    }
 </script>

と HTML --

 <form name="theForm">
   <select name="chooseCat" onchange="swapOptions(this.options[selectedIndex].text);">
        <option value="">Please select your state ...</option>'
                 <?php 
                    $query = mysql_query("SELECT DISTINCT state FROM sites ORDER BY state") 
                           or die(mysql_error());  
                    while ($result = mysql_fetch_assoc($query)) {   
                           $stateChoice = $result['state'];                                      
                             echo '<option value="';
                             echo "$stateChoice"; 
                             echo '">';
                             echo "$stateChoice";  
                             echo '</option>';
                             echo '<br />';                  
                     }
                  ?>
    </select> 
    <select name="sites" style="min-width: 100px;" onchange="location.href='reports.php?page=' + this.options[this.selectedIndex].value;">
                  <?php 
                     $query = mysql_query("SELECT * FROM sites") 
                            or die(mysql_error());  
                     while ($result = mysql_fetch_assoc($query)) {                                      
                            echo '<option value="';
                            echo '">';
                            echo $result['longname'];  
                            echo '</option>';
                            echo '<br />';                  
                      }
                   ?>
     </select>
 </form>

これにより、2 つのドロップダウンが返されます。ドロップダウンにアルファベット順にリストされている、利用可能な州に対する私のクエリの結果を含む最初のもの。2 番目には、リストされているすべてのサイトの長い名前がありますが、特定の州 (選択した州) 内のサイトだけでなく、テーブル内のすべてのサイトが対象です。

最後に、ドロップダウン 1 に使用可能なすべての状態を入力する必要があります。ユーザーが州を選択すると、選択した州内のすべてのコミュニティでドロップダウン 2 の作成がトリガーされます。ドロップダウン 2 でコミュニティの選択をクリックすると、ユーザーのブラウザがたとえばhttp://www.webpage.com/reports.php?page=communityNameGoesHere ...にリダイレクトされます。

ここでのアドバイスに感謝します:)

4

1 に答える 1

1

あなたが行くことができるいくつかのルートがあります。AJAX を使用して、州の選択時にサイト リストの値を取得できます。または、単純に JavaScript を使用して、州の選択に基づいて 2 番目のリストの値をフィルタリングすることもできます。

2番目の方がより簡単なので、2番目の方が適していると思うかもしれません。だから私はそれに焦点を当てますが、議論できるAJAXソリューションが必要な場合.

単一の DB 呼び出しを行うようにスクリプトを修正します。1 つのテーブルから情報を照会しているため、DB を 2 回呼び出す理由はありません。

単に使用するSELECT * FROM sites ORDER BY states ASC

その後、結果セットをループして、次のようなことを行うことができます

$array = array();
while ($row = mysql_fetch_assoc($query)) {
    $array[$row['state']][] = $row;
}

次に、最初の選択を作成し、オプションを次のように入力します。

foreach($array as $state => $not_used) {
    echo sprintf('<option value="%1$s">%1$s</option><br />', $state);
}

次に、2 番目の選択を作成し、オプションを次のように入力します。

foreach($array as $state => $state_array) {
    foreach($state_array as $site) {
        echo sprintf('<option class="%1$s" value="%2$s">%3$s</option><br />', $state, $site['shortname'], $site['longname']);
    }
}

ここに HTMLclassプロパティを追加したことに注意してください。これにより、表示したいアイテムのみを表示する便利なハンドルが作成されます。

サイトの select 要素に の ID を与え、sitesstates の selected 要素に のID を与えますstates。CSS で次のルールを設定します。

#sites { display: none; }
#sites option { display: none; }

これにより、最初はサイト メニューとその中のすべてのオプションが非表示になります。

ここで、適切な要素を非表示/表示し、サイト選択時にリダイレクトを行うための簡単な jQuery をいくつか示します。これはあなたがやろうとしていることを簡単にするので、jQueryについて言及します。

$(document).ready(function () { // calls this function on document ready
    $('#states').change(function() { // binds onchange function to #states select
        var selected_state = $(this).val(); // gets current selected value of #states select
        $('#sites option').hide(); // hides all options in sites select
        $('.'+selected_state).show(); // show site options with class = selected_state
        $('#sites').show(); // show entire #sites select (only useful for display from initial hidden state)
    });
    $('#sites').change(function() { // binds onchange function to #sites select
        window.location = 'reports.php?page=' + $(this).val(); // perform redirect
    });
});
于 2012-09-10T20:34:16.560 に答える