i have this simple html code
<html>
<body>
<select name="country" id="country">
<option value="1">Falkland Islands (Malvinas)</option>
<option value="2">canada</option>
<option value="3">Finland</option>
<option value="4">France</option>
<option value="5">United Kingdom</option>
<option selected="selected" value="12">United States</option>
</select>
</body>
</html>
if this dropdown menu is in the bottom of a webpage, and whenever the user selects one of the options on the menu, the user automatically go to the top of the webpage without reloading, i know it's simple but i could't do it, hope you help me guys, thanks.
In the head of your file, place this little snippet:
<script type="text/javascript">
window.onload = function(){
document.getElementById("country").onchange = function(){
window.scrollTo(0, 0);
};
};
</script>
There's no need to load jQuery for a simple action such as this; it's pointless to include such a large file for something Vanilla JavaScript can handle with ease.
This should take care of it for you... Add this to your <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("select#country").change(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
</script>
Related
I'm trying to create a select menu that allows the user to choose one option whether by typing or selecting it from the list. The code is working on online editors such as (JSfiddle). The issue is that select list doesn't work as expected when I try opening it up on my local machine using Chrome or Firefox.
Here is the HTML code that I'm using on online editors (select.html):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<div id="select-container">
<select id="test" style="width:150px">
<optgroup label="Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="6.1">Option 6.1</option>
</optgroup>
</select>
</div>
</body>
</html>
I just added the following line on my local machine inside HTML body to load the JS file:
<script src="select.js"></script>
And here is my JS code (select.js):
/* jshint esnext: true */
$("#test").select2();
optgroupState = {};
$("body").on('click', '.select2-container--open .select2-results__group', function() {
$(this).siblings().toggle();
id = $(this).closest('.select2-results__options').attr('id');
index = $('.select2-results__group').index(this);
optgroupState[id][index] = !optgroupState[id][index];
});
$('#test').on('select2:open', function() {
$('.select2-dropdown--below').css('opacity', 0);
setTimeout(() => {
groups = $('.select2-container--open .select2-results__group');
id = $('.select2-results__options').attr('id');
if (!optgroupState[id]) {
optgroupState[id] = {};
}
$.each(groups, (index, v) => {
optgroupState[id][index] = optgroupState[id][index] || false;
optgroupState[id][index] ? $(v).siblings().show() : $(v).siblings().hide();
});
$('.select2-dropdown--below').css('opacity', 1);
}, 0);
});
That's what I'm getting on my online editor
However, I'm getting a normal list that displays all the options straight away on my local machine and has no text box for user input.
Any suggests would be greatly appreciated. Thanks :)
You need to run your script after document loads in select.js. Also, Check your config on jsfiddle on how the script is run.
Enclose your js code as below.
$( document ).ready(function() {
/* your entire js code goes here */
});
Check the file path in <script src="select.js"></script>. May be select.js and your html file are not in same folder.
I have the next code with a Select:
http://jsfiddle.net/pdkg1mzo/18/
The problem is that I want to launch the alert every time a select option is clicked, although the option that was clicked is the one that is currently selected.
This may work:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
alert(selectedName)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
You could add a half second delay to the alert, so it shows the name after the selection has been made:
$(function(){
$(".normal").on("change",function(){
//alert("trigger");
var selectedName = $('#selectId').find(":selected").text();
console.log('selectedName is: ', selectedName)
setTimeout(function () {
//do something once
alert(selectedName)
}, 500);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="normal" id="selectId">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
Try this,
$(function(){
$(".normal option").on("click",function(){
alert("trigger");
});
});
try this,
<select class="normal" name="mysel" onChange="show(this);">
<option value="18">John</option>
<option value="18">Lorry</option>
<option value="19">Jerry</option>
<option value="20">Smith</option>
</select>
pure javascript
<script>
function show(m){
var k=m.options[m.selectedIndex].value;
alert(k);
}
</script>
Try this it perfectly works.
I think you can't do this, but perhaps you can try Chosen: https://plugins.jquery.com/chosen/.
I don't know why do you want to do this, do you want to reload de page, load Ajax results. Maybe it is unnecessary for user experience and you will not improve it at all.
I am trying to replicate this simple example but for the life of me cannot get it to work. The first picture displays, but it doesn't ever change. Forgive me if this is basic, I am pretty new with javascript.
<html>
<head>
<script src="/js/jquery-1.11.2.js"></script>
<script type="text/javascript">
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
</script>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picute 1</option>
<option value="2">Picute 2</option>
<option value="3">Picute 3</option>
<option value="4">Picute 4</option>
<option value="5">Picute 5</option>
</select>
</body>
</html>
You need to place your code in :
// A $( document ).ready() block.
$( document ).ready(function() {
// Your code here.
});
Else your code wont work. In jsfiddle you can see on the left the javascript is loaded onDomready
$( document ).ready(function() {
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
});
In the jsFiddle, you don't have to specify the document ready function as it is done dynamically. Try this, it should work for you.
I am trying to figure out how to make this work. Please let me know if there is something I can change to make this code work without changing it completely.
<select name="fontPick">
<option value="0">Font</option>
<option value="1">Calibri</option>
<option value="2">Candara</option>
<option value="3">Tahoma</option>
</select>
<script type="text/javascript">
document.querySelector('[name="fontPick"]').addEventListener('change', function () {
var fonts = this.options[this.selectedIndex].textContent;
document.body.style.fontFamily = fonts;
});
</script>
<script type="text/javascript> you forgot the closing " make it
<script type="text/javascript">
<script type="text/javascript">
function jumpto(x)
{
if (document.form1.jumpmenu.value != "null") {
document.location.href = x
}
}
</script>
<body onLoad="startup()">
<form name="form1">
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option>Jump to...</option>
<option value="http://www.ecortes.brinkster.com/">Homepage</option>
<option value="htttp://www.google.com/">Aesop's Fables</option>
<option value="http://www.quackit.com/html/">HTML</option>
<option value="http://www.quackit.com/css/">CSS</option>
<option value="http://www.quackit.com/sql/tutorial">SQL</option>
<option value="http://www.quackit.com/database/tutorial">Database Tutorial</option>
<option value="http://www.xtechride.com">Web Hosting Tutorial</option>
</select>
</form>
So my javascript code is supposed to create a jump menu, but once I load the website the jump menu shows up but the links don't redirect me to the links I wrote. Any help figuring out what the error could be would be appreciated.
You can drastically simplify this by using some very slightly more modern HTML and JavaScript practices.
<script type="text/javascript">
function jumpto()
{
if (this.value) {
document.location.href = this.value;
}
}
</script>
<form>
<select onchange="jumpto()">