Question

我想在用户选择一个选项（来自下拉列表）时自动显示结果，而不使用表单中的提交，即只需选择选项，结果就在这里。默认情况下（如果用户没有选择任何选项并希望查看完整列表）＆＃34;全部＆＃34;应该选择选项。

在我的代码中，只有＆＃34;策略＆＃34;选项显示，并且在选择任何其他选项时也不会改变。

代码是：

<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

为select元素提供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 个答案: