in my script, I have a select-field:
<select name="src[jumpMenu]" id="jumpMenu" onchange="ChangeImage(this.value,'preview');">
<option value="A">AStyle</option>
<option value="B">BStyle</option>
<option value="C">CStyle</option>
</select>
and I got this Javascript below:
<script language="Javascript" type="text/javascript">
<!--
function ChangeImage(newimage,imageid) {
if(document.getElementById(imageid).src != newimage)
document.getElementById(imageid).src = newimage;
}
// -->
</script>
and here is my problem:
I can't change the values because of the dependence for the other files (which I won't change).
Do you know any solution how to switch "A" to "img/src/A_top.png" for example and get it working with this script?
Thanks.
document.getElementById(imageid).src = "img/src/"+newimage+"_top.png";
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 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">
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How to change “selected” value in combobox using JavaScript?
So here's my code"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
How to change default selection (from topics to posts)?
I can NOT modify this part of HTML code in any way, but I can add a script anywhere inside the head.
Try it (have not tested):
var doprdown = document.getElementsByName('show_as')[0];
for(var i = 0; i < dropdown.options.length; i++){
if(dropdown.options[i].value == "posts")
dropdown.selectedIndex = i;
}
Or jQuery:
$("select[name='show_as'] > option[value=posts]").attr('selected', true);
Try using,
Jquery Code:
<script language="javascript" type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
$('#show_as').val('posts');
});
</script>
Html code:
here i have specified an id in-order to select the select box called "show_as"
<label class="conl">Pokaż wyniki jako
<br><select name="show_as" id="show_as">
<option value="topics">Wątki</option>
<option value="posts">Posty</option>
</select>
<br></label>
Re-Edited:
I went over to W3schools and played around in there javascript editor window to see what was going on. Here is a shorter script.
<html>
<body>
<script type="text/javascript">
var eType = document.getElementById("Type")
</script>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
document.write(eType);
</script>
</body>
</html>
I did what ThiefMaster suggested on how to get the element by not using the .text or .value but as you can see if you run this code I still get a null at this step of the process. From what I can see and many suggestions I am doing this correctly. I know I must be missing something. Can anyone see it?
You're trying to get the element before you've actually put it on the page. Fix the order, and don't use document.write.
<html>
<body>
<select class="field select addr" id="Type">
<option value="Type:L" selected="selected">Location</option>
<option value="Type:C">Corporate</option>
<option value="Type:R">Remittama</option>
<option value="Type:M">Mailing</option>
</select>
<script type="text/javascript">
var eType = document.getElementById("Type")
document.body.appendChild(document.createTextNode(eType));
</script>
</body>
</html>
Your second code block is almost correct; you need to use the select element itself instead of its (non-existent) value:
var elem = document.getElementById("Type");
var type = elem.options[elem.selectedIndex].value;
Demo: http://jsfiddle.net/ThiefMaster/nw3nN/
If you had jQuery available you could drastically reduce the amount of code necessary:
var type = $('#Type').val();
Could someone please tell me how to get this code working on a webpage? Particularly what should go in the header?
http://jsfiddle.net/mekwall/TJcP4/1/
Sorry if this is a basic question...steep learning curve!
Thanks
Your code is using the jQuery JavaScript library ... so your head will need to contain :
<script type="text/javascript" src="<jquery url>"></script>
Replace the <jquery url> with a valid url to the jQuery library. I suggest you use the Google CDN for the url or alternatively download a copy and store it on your server -> http://docs.jquery.com/Downloading_jQuery#Download_jQuery
Then to ensure your code runs once the DOM is ready wrap all of your JavaScript within the following :
$(document).ready(function() {
// your code here
});
Docs for ready() here
If your going to be using jQuery more I suggest you start reading here http://docs.jquery.com/How_jQuery_Works and if you going to learn JavaScript, you can't go wrong with reading this too -> https://developer.mozilla.org/en/JavaScript/Guide
Copy the code below, save it with a .html extension (e.g. test.html) and then double click to open.
<html>
<head>
<title>Page Title here</title>
</head>
<body>
<select id="t_dermal_name">
<option value="t_default_dermal">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<select id="t_wrinkle_name">
<option value="t_default_wrinkle">-- Choose --</option>
<option value="1" rel="30">Between Eyebrows</option>
<option value="7" rel="30">Individual Line Softening</option>
<option value="2" rel="30">Lip Contouring</option>
</select>
<span id="output"></span>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!--You can use a local version of jquery-->
<script type="text/javascript">
$(document).ready(function(){
function onSelectChange(){
var total = 0,
dermal = $("#t_dermal_name").find('option:selected'),
wrinkle = $("#t_wrinkle_name").find('option:selected');
if(value = dermal.attr('rel')){
total += parseInt(value);
}
if(value = wrinkle.attr('rel')){
total += parseInt(value);
}
$("#output").html(total);
}
$("#t_dermal_name").change(onSelectChange);
$("#t_wrinkle_name").change(onSelectChange);
});
</script>
</body>