在下拉列表中选择选项时自动显示结果

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