I'm working on a project that uses bootstrap. In the project, some additional functionality was needed so that when a user selects a certain option from the drop down it hid/showed certain content. It look as follows:
<select class="form-control" id="state-text" onChange="test()" name="selected-state" >
<!-- Select options here -->
</select>
Then I had the JS as follows:
function test()
{
// Code here
}
Now this didn't work, and would throw an error that function test was not defined. However, when I repalced it with:
test = function test()
{
//Code here
}
it worked as intended. I don't understand why one worked and the other didn't? Does it maybe have something to do with the other JS files that the bootstrap file is importing?
As you tagged the question as jQuery here's a fiddle I made quickly
http://jsfiddle.net/nYmF8/
markup
<select class="form-control" id="state-text" name="selected-state" >
<option value="a">A</option>
<option value="b">B</option>
<option value="b">C</option>
</select>
jquery
$(function(){$('#state-text').on('change', function () {
alert('changed value to to '+$(this).val());
});});
maybe you forgot to put your jQuery in the document ready function?
try to avoid adding JS in the middle of your HTML. Try doing that instead:
$(document).ready(function() {
$('#state-text').on('change', function () {
//Code Here
});
});
I am assuming here that you are using jQuery since it's a requirement for bootstrap. If not, let me know.
Related
I wanted to added javascript variable inside html code.
Here is my code:
<select id="currentrun" name="currentrun" >
<option value=""><script>selectedrun</script></option>
</select>
and my js function
var currentrun="";
var selectedrun="";
function setCurrentRun()
{
currentrun = document.getElementById("runlist");
selectedrun = currentrun.options[currentrun.selectedIndex].value;
}
But this doesn't work.
Can anyone help me to do this.
Thanks in advance.
You don't have to run the script like that.
The value of the currentrun can be retrieved as:
document.getElementById('currentrun').value
And for completeness, if you want to trigger a JavaScript function call each time the selection is modified, do this:
<select onchange="my_function();">
<option>...</option>
</select>
It seems like you are trying to set the text of the option element with javascript. Here is one way you can do it using the id of the element to get it and then set the text property of the element to your javascript variable:
<select id="currentrun" name="currentrun" >
<option id="currentoption" value=""></option>
</select>
<script>
document.getElementById("currentoption").text = selectedrun;
</script>
Be sure to put any necessary javascript that declares and sets the selectedrun variable before the above script.
I have a html <select> tag with some <option>s. Something like this:
<select id="season">
<option value="">Select an option</option>
<option value="1">Spring</option>
<option value="2">Summer</option>
<option value="3">Autumn</option>
<option value="4">Winter</option>
</select>
And I have this javascript code:
<script>
$(document).ready(function(){
$("#season").val("1");
});
</script>
This does not select "Spring" option and remain in "Select an option" option! But when I use
$(document).ready(function(){
setTimeout(function(){
$("#season").val("1");
}, 100)
});
This works correct! What is the problem? Any help would be greatly appreciate.
Try This
<script>
$(document).ready(function(){
$("option[value='1']").attr('selected','selected');
});
</script>
Above mention code will work.
even below mention your code will work, but script section should below all the HTML code and before the body close tag. Because once jQuery or javaScript start executing at that time HTML DOM will available and script can able to select that DOM.
<script>
$("#season").val("1");
</script>
In your code once you add setTimeout and your script is able to select the option because you are delaying by 100 micro second, it means before executing your script HTML DOM are available that is why you are able to select the DOM
<script>
setTimeout(function(){
$("#season").val("1");
}, 100)
</script>
on page load is called after all resources is loaded whereas jquery ready is called when dom is loaded so basically ready gets called before on-load. Hence it does not work
I have a code that should allow me to show div id='yestext' when 'Yes' is selected in the dropdown box. Yet this is not working. I don't know what isn't working, but something clearly isn't.
JS
function text() {
if (document.getElementById("text").selectedIndex == "0") {
document.getElementById("yestext").style.display = "block";
}
else {
document.getElementById("yestext").style.display = "none";
}
}
HTML
<select id='text' onchange='text()'>
<option value="0">Yes</option>
<option value="1">No</option>
</select>
<div style='display:none;' id='yestext'>
What text would you like displayed?
<input type='text' class='text' name='type' value size='20'/>
</div>
Here is the JSFiddle containing my code: http://jsfiddle.net/4w9fh/
Your code is fine. The You had the JSFiddle set to run your code in OnLoad and it wrapped the text() function so it did not add it to global namespace. I fixed it by moving the js to the head and now it works.
I also called the text() function when the html finishes loading to take in account the browser remembering the last choice.
Here is the updated code.
http://jsfiddle.net/4w9fh/2/
I am attempting to implement the ui.selectmenu from here http://filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/, but have it placed inside of a jQuery dialog. Not sure if that is where the conflict lies.
The HTML markup is:
<div id="selModeBox" title="Mode selection Form">
<label for="mode">Select modes:</label>
<select id="mode" name="mode">
<option value="v0" selected="selected">-- Make a Selection --</option>
<option value="v1">Mode 1.</option>
<option value="v2">Mode 2.</option>
</select>
</div>
The Javascript to implement:
jQuery(document).ready(function() {
$('#selModeBox').dialog({
modal: true
});
$('#selModeBox select').selectmenu();
$('#tabs').tabs();
});
The javascript error appears on load an refers to this line of the ui.selectmenu javascript code (line 108):
this.element.click(function() {
this._refreshValue();
}).focus(function() {
this.newelement[0].focus();
});
Has anyone experienced something similar or have any ideas on remedying this?
Its possible that jQuery 1.8 is causing problems as its not tested yet, please see https://github.com/fnagel/jquery-ui/issues/261
Please open an new issue if the problem persists in 1.7.x (please see https://github.com/fnagel/jquery-ui/issues/61)
I have a JavaScript function:
function redirect(location) {
window.location.href=location;
}
Which I'm using like so:
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
I'm expecting for it to redirect to the selected option value, but does'nt seem to do anything? - bare in mind im new to JavaScript.
Hope someone can help! :)
Try this:
<select onChange="redirect(this.value)">
try this
<script>
function redirect() {
var location=document.getElementById("i").value;
window.location.href=location;
}
</script>
<select onChange="redirect()" id="i">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
Your code itself is functional (i tried).
Where have you placed the function definition?
Is there any other javascript code on the page?
In which browser are you testing this?
If you're running it in Firefox check the error console (Tools->error console).
I also noticed that Internet Explorer 8 blocks this javascript, I haD to check allow blocked content for this to work.
can be because location is a short way to call window.location, so just rename your input parameter - _location, newLocation, loc, whatever else.
UPDATE
Nope, this should work. Having only
<select onChange="redirect(this.options[this.selectedIndex].value)">
<option value="http://mysite.com/videos">One</option>
<option value="http://mysite.com/music">Two</option>
</select>
<script type="text/javascript">
function redirect(location) {
window.location.href=location;
}
</script>
on the page gave me the desired result, so the error may be somewhere around - just give us more code!