I have a couple select elements with onchange attributes that fire a different functions. For some reason, the function is not running through. I think the problem is in the onchange attribute. Here is the HTML:
<select id="select_level" onchange="updateJumpLevelLink(this.SelectedIndex.value)">
<option value="easy">Level</option>
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
<select id="select_puzzle" onchange="updateJumpPuzzleLink(this.SelectedIndex.value)">
<option value="1">Puzzle</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="jump">Jump</div>
This is the javascript:
$(document).ready(function() {
for (i = 1; i <= 10; i++) {
$('#select_puzzle').append('<option value="'+i+'">'+i+'</option>');
}
function updateJumpLevelLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+new_value+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
}
function updateJumpPuzzleLink(new_value) {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+new_value);
}
});
Let me know if you see the problem here. Thanks.
i dont know what you want to do in your project, but if the case is onchange, i think this will help you, add jQuery in your JS Libraries it will help you a lot here is my example onCHange sample using jQuery
$( "#select_level" ).change(function() {
alert($(this).val());
});
Fiddle full working.
i used
$( "#select_level" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+$(this).val()+'&puzzle='+current_link.substr(current_link.indexOf('?')).split('&')[1].substr('puzzle='.length));
});
$( "#select_puzzle" ).change(function() {
var current_link = $('#jump_link').attr('href');
$('#jump_link').attr('href', 'sudoku?level='+current_link.substr(current_link.indexOf('?')).split('&')[0].substr('level='.length)+'&puzzle='+$(this).val());
});
Your first problem is that your functions are defined in the document ready, so it won't work because the functions technically don't exist on the global scale. You need to move it outside the document.ready().
Your second problem is that you're passing the wrong value. "this.SelectedIndex.value" should be "this.Value", otherwise it doesn't send anything into the function.
<select id="select_level" onchange="updateJumpLevelLink(this.value)">
Here's the fix: http://jsfiddle.net/yBe6J/3/
Related
I have found a huge amount of problem-related to my problem. Actually, I have the solution about "without holding Ctrl button to select the option."
For better reference: Selecting multiple from an html select element without using ctrl key
I got the best solution in the following question. But the problem is that I need a function having both
1. without holding the Ctrl button
2. limited the selection option less than 3
Here the code for HTML select element without using ctrl key
window.onmousedown = function (e) {
var el = e.target;
if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
e.preventDefault();
// toggle selection
if (el.hasAttribute('selected')) el.removeAttribute('selected');
else el.setAttribute('selected', '');
// hack to correct buggy behavior
var select = el.parentNode.cloneNode(true);
el.parentNode.parentNode.replaceChild(select, el.parentNode);
}
}
select{
width: 200px;
height: 200px;
}
<select multiple>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
Here the code for limited the option with holding ctrl button:
$("select").on('change', function(e) {
if (Object.keys($(this).val()).length > 3) {
$('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
}
});
select{
width: 200px;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select multiple>
<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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
But I can't make the two scripts together. I have tried but there only work only "without holding ctrl" script.
Note: I have found other script in jquery to activate "without holding ctrl" in multi-select option. But they didn't send data correctly. The above pure JS is perfect for me :)
Thanks
Your first script allows for multiple selections to be made by clicking without and with CTRL. You don't need to combine anything.
I have the following HTML
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
and I need to fire up a Javascript callback when any of the options is selected.
I have the following piece of Javascript:
$(function() {
$(document).on("EVENT", "[data-behavior~=toggle-visibility]", function() {
...
});
});
Is there an event I can use to achieve my goal?
PS - I understand I could move data-behavior="toggle-visibility" to the select tag and then listen for change and get the currently selected value. However, since that piece of Javascript is already used with other elements, I need to keep the data-behavior attribute on the options.
It should work here https://jsfiddle.net/xpvt214o/535895/
You should be using on change event instead:
The example is as follows:
$("select").on("change", function(e) {
var sel = $(this).find(":selected");
var attr = sel.attr("data-behavior");
console.log(attr + "....." + $(this).val())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
Html Code:
<select id="maker-list">
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
JavaScript code:
$('#maker-list').off('change').on('change', e => {
selectedValue = $('#maker-list').val();
// Here you can call another function with selectedValue
});
In above JavaScript Code, we bind change even and unbind the same event after selecting value so that it will not fire twice. jquery help
I hope this will work ... happy coding :)
$("select").on("change", (e) => {
console.log(e.target.value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">filter</option>
<option data-behavior="toggle-visibility" data-scope="a" value="a">a</option>
<option data-behavior="toggle-visibility" data-scope="b" value="b">b</option>
</select>
I have a "select" on my JSP. It is fill by "Region" objects like this :
<sf:select id="regionslist" path="region" items="${regions}" itemLabel="nameRegion"/>
I want to get the attribute "Region.idRegion" from the selected one on my list.
Using this script :
$regions.on('change',
function(){
var val = $('#regionslist option:selected').val();
console.log(val)
}
)
i retrieve the object reference not the object in it self (mypackage.Entity.Region#75448e27).
I heare about the possibility to use a JSON parser to get the object on the JS script but i'm newbee concerning JS. So can samone help me ?
Thank you.
Lets pretend you got the following HTML:
<select name="my-select" id="my-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button id="my-button">Get selected value</button>
And this is the JS to get the value of the selected option:
var form = document.getElementById('my-select'),
button = document.getElementById('my-button');
button.onclick = function (event) {
event.preventDefault();
console.log(form.value);
}
And here you can see a live demo. http://jsfiddle.net/yck69tLb/
I have two select option buttons on single web page but on different tabs. I want to change the other one button value on change of any one button and assign it to some element like span in example code. All things are working perfectly but it just taking time to close dropdown when i am changing value. in firefox there is no problem
jsfiddle
My HTML Code
<select class="select one" >
<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><br><br><br>
<select class="select two">
<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>
<br><br><br>
<span class="value"></span>
JQuery
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function(){
lang = $(this).val();
$('span.value').text(lang);
if ($(this).hasClass('one')) {
$('.two').val($(this).val()).trigger('change');
}
else{
$('.one').val($(this).val()).trigger('change');
}
});
Thanks in advance
fixed jsFiddle demo
It's cause you're concurrently triggering changes. Cool that down, this is all you need:
var lang = $('select.one').val();
$('span.value').text(lang);
$('select.select').change(function () {
lang = this.value;
$('span.value').text(lang);
$('.select').val(lang);
});
You can try this instead:
var lang = $('.select.one').val();
$('.value').text(lang);
$('.select').change(function (e) {
$('.select').val(this.value);
$('.value').text(this.value);
});
The issue was .trigger() method, that was traversing up to the dom for lookup and setting the values to each elem again and again.
Check the updated fiddle.
I'm a beginner with javascript, and I'm (with permission) building a website to host the stories of an amateur author I like. I'm trying to add a pair of drop down boxes at the top of the screen that can adjust text size and font family for the chapter. The drop downs are there and I've placed a div container around the chapter text, but the font isn't changing. Here's the applicable code:
Font: <select name='fontface' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontFamily = this.options[this.selectedIndex].value;">
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select name='fontsize' onchange="var ftxt = getItem('fluidtext'); if(ftxt)ftxt.style.fontSize = this.options[this.selectedIndex].value;">
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
I've added " div id='fluidtext' " further down the page where the chapter starts, and " /div " at the end of the chapter. There's no inline code in the story chapters except occasional bold and italic tags. The page is formatted using an external CSS style sheet.
The complete page (minus the CSS formatting) can be found here:
https://dl.dropboxusercontent.com/u/59191190/tower02.html
Any help would be appreciated!
I am going to write you the cleanest answer:
CodePen solution
The reason why I have added 'onkeyup' is due to FireFox not firing 'onchange' when cycling through with keyboard navigation.
Also, I have used an auto executing lambda function to ensure that we do not pollute the window object with our fluff variables.
Edit: For anyone who does not want the CodePen solution
HTML
Font:
<select id="fontface" name='fontface'>
<option value='Helvetica'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select id="fontsize" name='fontsize'>
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
<p id="fluidtext">
This is my fluid text
</p>
JS
(function() {
//Assuming document is ready
function onFontFaceChange() {
if(fluidTextNode) fluidTextNode.style.fontFamily = this.options[this.selectedIndex].value;
}
function onFontSizeChange() {
if(fluidTextNode) fluidTextNode.style.fontSize = this.options[this.selectedIndex].value;
}
var fontFaceNode = document.getElementById('fontface'),
fontSizeNode = document.getElementById('fontsize'),
fluidTextNode = document.getElementById('fluidtext');
if(fontFaceNode) fontFaceNode.onkeyup = fontFaceNode.onchange = onFontFaceChange;
if(fontSizeNode) fontSizeNode.onkeyup = fontSizeNode.onchange = onFontSizeChange;
}());
You're trying to call getItem function which is not defined.
You need to declare it:
<script>
var getItem = function(item) {
return document.getElementById(item);
};
</script>
Also try to avoid handling events in DOM attributes. I'd suggest the complete code look like this:
<script>
var getItem = function(item) {
return document.getElementById(item);
};
getItem('fontface').addEventListener('change', function() {
var ftxt = getItem('fluidtext');
if(ftxt)
ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});
getItem('fontsize').addEventListener('change', function() {
var ftxt = getItem('fluidtext');
if(ftxt)
ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
</script>
Font:
<select id="fontface" name='fontface'>
<option value='Helvetica' selected='selected'>Helvetica</option>
<option value='Verdana'>Verdana</option>
<option value='Times New Roman'>Times New Roman</option>
<option value='Courier New'>Courier New</option>
<option value='Georgia'>Georgia</option>
</select>
<select id="fontsize" name='fontsize'>
<option value='8pt'>8pt</option>
<option value='10pt'>10pt</option>
<option value='12pt' selected='selected'>12pt</option>
<option value='14pt'>14pt</option>
<option value='16pt'>16pt</option>
<option value='18pt'>18pt</option>
<option value='24pt'>24pt</option>
<option value='32pt'>32pt</option>
<option value='40pt'>40pt</option>
<option value='48pt'>48pt</option>
<option value='60pt'>60pt</option>
<option value='75pt'>75pt</option>
<option value='90pt'>90pt</option>
</select>
One thing worth mentioning is that addEventListener isn't cross browser. I'd suggest using jQuery and on method instead of addEventListener. Then the whole JS could look like this:
<script>
(function( $ ) {
$(document).ready(function() {
$('#fontface').on('change', function() {
var ftxt = $('#fluidtext');
if(ftxt)
ftxt.style.fontFamily = this.options[this.selectedIndex].value;
});
$('#fontsize').on('change', function() {
var ftxt = $('#fluidtext');
if(ftxt)
ftxt.style.fontSize = this.options[this.selectedIndex].value;
});
});
})(jQuery);
</script>
Add this to your page in order to define the missing getItem function:
<script>
function getItem(a) { return document.getElementById(a); }
</script>