Automatically show result when option is selected in Drop Down List
Question
I want to show the result automatically when an option (from Drop Down List) is selected by the user, without using Submit in form, ie 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
3 answers
solution1
0 2014-09-18 06:21:41
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"){
--
--
solution2
0 ACCPTED 2014-09-18 06:25:04
Give a ID to the select element. Ex : id="genre"
And then use :
var x = document.getElementById("genre").value;
alert("You selected: " + x);
solution3
0 2014-09-18 07:40:00
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.