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.
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.
function RecupText2() {
var ajaxRequest = ajaxFunction();
ajaxRequest.open("GET","ajax2.php",true);
ajaxRequest.onreadystatechange = function(){
if( ajaxRequest.readyState==4 && ajaxRequest.status==200){
document.getElementById("remplir").innerHTML= ajaxRequest.responseText;
}
}
ajaxRequest.send(null);
}
var interval = setInterval(RecupText2, 1000);
the setinterval updates the select list every second, which changes the selected value to the first option! thank you!
You could use the HTML5 Data Attribute to store the selected option.
Here; below, is an Example. This example requires & assumes the use of JQuery...
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
/** THE DOM HAS FULLY LOADED & NOW JQUERY CAN INTERACT WITH IT... */
$(document).ready(function(){
//RESET THE data-selected ATTRIBUTE EACH TIME THE VALUE OF THE SELECT DROP-DOWN CHANGES
$("#options-list").on("change", function(evt){
$(this).attr("data-selected", currentElem.val());
});
// MAKE SURE TO SET THE VALUE OF THE SELECT TO THE VALUE OF THE data-selected ATTRIBUTE AT EACH INTERVAL CHANGE
// SO WITHIN THE CODE THAT UPDATES THE SELECT, DO LIKE SO
$("#options-list").val( $("#options-list").attr("data-selected") );
});
})(jQuery);
</script>
</head>
<body>
<select name="options-list" id="options-list" class="options-list" data-selected="3">
<option value="10">Ten</option>
<option value="9">Nine</option>
<option value="8">Eight</option>
<option value="7">Seven</option>
<option value="6">Six</option>
<option value="5">Five</option>
<option value="4">Four</option>
<option value="3">Three</option>
<option value="2">Two</option>
<option value="1">One</option>
</select>
</body>
</html>
Hope this helps a bit....
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">
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>