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

问题描述：

I want to show the result automatically when an option (from Drop Down List) is selected by the user, without using Submit in form, i.e. Just choose the option and the result is here. And by default (if user doen't choose any option and want to see full list) "All" option should be selected.

In my code, only "Strategy" option is showing and also doesn't changing on choosing any other option.

Code is:

<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>

I doubt this line

var option=document.form1.genre.value;

Please correct where I m wrong

答

Give a ID to the select element. Ex : id="genre"

And then use :

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

答

Make it in this way

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

And in your javascript use as

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

答

first of all you don't have form1 then how you can use it.

you can achieve what you want by ajax.see a small demo.

<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>

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

相关推荐