Drop Down List, display
Question
I am trying to create a drop down list which is for a news website.
If user selects 1 in the drop-down list,
the page will display an id correspond to 1
if user select 2
the page will display an id correspond to 2
Possible? Please advice and Submit some Tutorials.
Thank You,
Yours Sincerely, Help!
4 answers
solution1
0 2015-11-28 09:52:46
You can use value :
var submitButton = document.getElementById("submit"); var thankyouLetter = document.getElementById("thankyou-letter"); var submitIt = function () { var rating = document.getElementById("rating").value; if (rating === "1") { thankyou = "I'm so sad? A 1;"? } else if (rating === "2") { thankyou = "So little;". } else if (rating === "3") { thankyou = "Thanks;"; } else if (rating === "4") { thankyou = "Thank you;"; } else if (rating === "5") { thankyou = "Awesome.;;.,"; } else { thankyou = "You need to rate!"; } thankyouLetter.innerHTML = thankyou; }; submitButton.addEventListener("click", submitIt);
<label>What rating? <select id = "rating"> <option value = "xxx">---</option> <option value = "1">1</option> <option value = "2">2</option> <option value = "3">3</option> <option value = "4">4</option> <option value = "5">5</option> </select> </label> <button id = "submit">Submit</button> <p><span id = "thankyou-letter"></span><p>
This is just an example of a rating, then a little "thank you letter". A value means that you don't have to do .value and getElementById all the time, but you still have to do some.
solution2
0 2011-07-05 07:19:44
Mmm. You'll need AJAX
Here you have a link to start:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=10
Hope this helps. Cheers
solution3
0 2011-07-05 07:29:26
you can simply use jquery selector methods check below option.
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function display() {
var Values = $("#drop").val();
alert(Values);
}
$("select").change(display);
})
</script>
</head>
<body>
<select id="drop">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</body>
</html>
solution4
0 2011-07-05 07:33:03
I would do it this way: http://jsfiddle.net/lnrb0b/Tq8Ag/
At least then the user won't get a non-working select box if javascript is turned off or an error occurs etc.
Hope that helps!
please note I'm using jQuery here - I think it will be pretty helpful to you
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.