在下拉列表中選擇選項時自動顯示結果

Question

我想在用戶選擇一個選項（從下拉列表中）時自動顯示結果，而無需在表單中使用Submit，即只需選擇該選項，結果就在這里。 並且默認情況下（如果用戶不選擇任何選項並希望查看完整列表）則應選擇“全部”選項。

在我的代碼中，僅顯示“策略”選項，並且在選擇任何其他選項時也保持不變。

代碼是：

<html>    
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            function selectOption() {
                var option = document.form1.genre.value;
                if (option == "All") { <? php $abc = mysql_query("select * from games where pc='yes'"); ?>
                        'games'
                    is the name of the table in my database

                    return true;
                } else if (option == "Action / Mission") { <? php $abc = mysql_query("select * from games where pc='yes' and genre='Action / Mission'"); ?>
                    return true;
                } else if (option == "Racing") { <? php $abc = mysql_query("select * from games where pc='yes' and genre='Racing'"); ?>
                    return true;
                } else if (option == "Sports") { <? php $abc = mysql_query("select * from games where pc='yes' and genre='Sports'"); ?>
                    return true;
                } else if (option == "Strategy") { <? php $abc = mysql_query("select * from games where pc='yes' and genre='Strategy'"); ?>
                    return true;
                }
                return false;
            }
        </script>
    </head>    
    <body>
        <table>
            <tr>
                <td>
                    <select name="genre" onChange="selectOption()">
                        <option value="All">All</option>
                        <option value="Action / Mission">Action / Mission</option>
                        <option value="Racing">Racing</option>
                        <option value="Sports">Sports</option>
                        <option value="Strategy">Strategy</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

我懷疑這條線

var option=document.form1.genre.value;

請糾正我錯了的地方

Answer 1

用這種方式做

<select name="genre" onChange="selectOption(this.value)">

並在您的javascript中用作

function selectOption(option_selected){
var option=document.form1.genre.value; // remove this line
if(option_selected== "All"){
--
--

Answer 2

為選擇元素提供一個ID。 例如：id =“ genre”

然后使用：

var x = document.getElementById("genre").value;
alert("You selected: " + x);

Answer 3

首先， you don't have form1然后如何使用它。

您可以通過ajax實現所需的功能。查看一個小演示。

<html>    
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script type="text/javascript">
            function selectOption() {
                var option = document.getElementById('genre').value;
                alert(option);

                $.ajax({
                 type:'post',
                 url:'submit.php',// construct sql in this page and return the data to be shown .you can get the option on submit page using $_POST['option']
                 data:{option:option},
                success:function(data){
                   alert('got it');// show data here 
                },


                });

            }
        </script>
    </head>    
    <body>
        <table>
            <tr>
                <td>
                    <select id="genre" onChange="selectOption()">
                        <option value="All">All</option>
                        <option value="Action / Mission">Action / Mission</option>
                        <option value="Racing">Racing</option>
                        <option value="Sports">Sports</option>
                        <option value="Strategy">Strategy</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>

在下拉列表中選擇選項時自動顯示結果

問題描述

3 個解決方案

解決方案1
0 2014-09-18 06:21:41

解決方案2
0 已采納 2014-09-18 06:25:04

解決方案3
0 2014-09-18 07:40:00

在下拉列表中選擇選項時自動顯示結果

問題描述

3 個解決方案

解決方案1 0 2014-09-18 06:21:41

解決方案2 0 已采納 2014-09-18 06:25:04

解決方案3 0 2014-09-18 07:40:00

解決方案1
0 2014-09-18 06:21:41

解決方案2
0 已采納 2014-09-18 06:25:04

解決方案3
0 2014-09-18 07:40:00