I am learning jQuery and in a project I fell into a problem. What I want is, there is a select box, which have some values. When my page loads, I want that if this select box has a certain value selected, its immediate div will appear automatically, otherwise, that div will be hidden.
My problem, here no event is occurring, it all will happen right after the page loads.
I did the same kind of work in another page, but there the div appears when I "select" a certain value. But, here I want this to happen when the page loads.
So what I tried :
html code :
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<select class="selector">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
This is my jQuery code :
<script>
$(document).ready(function(){
if($('.selector').val()=="volvo")
$(this).next('.show').show();
});
</script>
So, what I want is, if the .selector has the value "volvo", its next div(which has the class "show") will show up, otherwise not. Here, I am not using any change event. I want this happen after the page has been loaded.
I tried this too :
if($('.selector').val()=="volvo")
$(this).next().show();
But same result, nothing happens, the doesn't show up.
What should I do now ?
N.B.: Please notice that there are multiple <select> elements.
You are using this in document-ready handler, where it referees to document. You should bind change event with select and trigger it on page load.
Use
$(document).ready(function() {
//Bind change event
$('.selector').change(function() {
if ($(this).val() == "volvo") {
$(this).next('.show').show();
}
}).change(); //Trigger on page load
});
When you are using that in document.ready this doesn't refer to select.
You should say
$('.selector').next('.show').show();
DEMO
Here is solution. Hope its work for you :-
<select class="selector">
<option value="select">select</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<div class="show" style="display:none;">
<textarea id="text">Sample Text</textarea>
</div>
Jquery code
$(document).ready(function(){
$(".selector").on("change", function(){
$val = $(this).val()
// alert($val);
if($val == "volvo"){
$(".show").show();
}else{
$(".show").hide();
}
})
});
Checkout below link
JSFiddle
Related
I'm trying to add an Render.Action to Html using javascript on an onChange event on a dropdown.
However when writing the #{Html.RenderAction} in javascript, it is viewed as html code instead of javascript code, and also executes before the script has triggered.
I want the #{Html.RenderAction} in javascript to be javascript code only, and then when added to the Html, work as intended.
Any ideas?
html:
<select id="Categories-Dropdown">
<option value="1" selected="selected">- Select Category -</option>
<option value="2">Option 1</option>
<option value="3">Option 2</option>
<option value="4">Option 3</option>
<option value="5">Option 4</option>
</select>
javascript:
function changed() {
var ID = document.createElement("div");
ID.innerHTML = '#{Html.RenderAction("RenderCategories", "ScannableNotes");}' // This is the problem
}
Here's what I would do to achieve this,
First instead of rendering in JS I would put it in html inside an invisible div:
<div class="js-scannable-notes" style="display: none;">
#Html.Action("RenderCategories", "ScannableNotes")
</div>
and then just read the content of that div from JS:
function changed() {
var html = document.querySelector('.js-scannable-notes').innerHTML;
// use your html here as you see fit
}
Actually I want to redirect user to another page ("abc.html") on clicking on INR option of the select list and on clicking on other option it should not redirect to any page.
PS : I can't remove or change value attribute of other option.Any help will be really appreciated.
<select>
<option value="USA">USA</option>
<option value="AUD">AUD</option>
<option value="INR">INR</option>
</select>
Simply use change event in jquery and check the value selected and do whatever you want like this
$('select').change(function(){
if($(this).val() == 'INR'){
console.log("abc.html");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="USA">USA</option>
<option value="AUD">AUD</option>
<option value="INR">INR</option>
</select>
I have a select input with a few options, and a jQuery code who show a div when you select a certain option.
At moment i'm using this :
$('#id_treatment_type').val() == '1'
It work great on chrome, but not in firefox. When I set the mouse on the option (whitout clicking) it change the value of the option.
On Chrome it work because the value change only when I clicked on the option.
The problem is that I have to put this in a loop because I have way to many fields to set a .change on everyone
window.setInterval(function(){alerts();}, 5000);
I would set this interval to a few ms because I need to show the div faster.
I need to have it work on firefox but I don't know how if someone have an idea. Sorry for my english, but I hope you could understand what i'm trying to say.
Thank you
You can use the change event. Example
$('#id_treatment_type').on('change', function(){
alert($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_treatment_type" id="id_treatment_type">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I made a fiddle with a small example:
https://jsfiddle.net/usz5pyhv/
<select id="mySelect">
<option value="1">one</option>
<option value="2">two</option>
</select>
<div id="whenValOne">Value is one</div>
$(function() {
$("#mySelect").change("change", function() {
if(this.value == 1)
$("#whenValOne").show();
else
$("#whenValOne").hide();
});
});
I have a select list, #select1 and when the user chooses an option from this list, a certain action happens. I tried to do it with the following javascript code but sadly it is not working:
SCRIPT
jQuery(document).ready(function(){
$( document ).on( "change", "#select1", function() {
alert("test");
});
});
So when I choose a certain option, I don't get the test alert.
Any idea why this is happening?
EDIT
HTML
<select id="select1">
<option selected="selected" disabled="disabled">Choose your country</option>
<option value="2">Canada</option>
<option value="3">France</option>
<option value="4">India</option>
<option value="5">Poland</option>
</select>
I think This will Work
$('body').on('change','#select1',function(){
alert("test");
});
DEMO HERE
How to close combobox when onmouseout?
<select onmouseout="">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
You can't do this (reliably). The popup that appears is not available to manipulate, ie open or close, programmatically and its behaviour is defined by the browser (or operating system).
To expand on this further, both IE and Firefox can close the popup by blurring the select element:
selectEl.blur();
Although, the mouseout event fires even when you move the mouse to the options in the popup, so it would require a bit of hackery magic. In Chrome it will blur the select element but the box will remain open.
It's generally best to leave the behaviour of UI components alone, so that users get the experience they expect through interaction with your website.
You can do a little trick like this...
<select onmouseover="size = 5" onmouseout="size = 0">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
This will expand the menu on mouse over then collapse it when you move out.
Edit: This can cause issues with placement of other elements if you're not careful.
A couple of years late but in case someone else is looking at this...I was able to toggle the open/close state of a select element in Chrome by sending it a mouse click. In this example moving the mouse over the toggle button will toggle the state of the <select>. This is a toggle, not an explicit open or close, but worked for me.
<script type="text/javascript">
function clickSelect(element) {
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true);
element.dispatchEvent(event);
};
function toggleSelect() {
clickSelect(document.getElementById("select"));
}
</script>
<form>
<select id="select">
<option>one</option>
<option>two</option>
</select>
<input type="button" onmouseover="toggleSelect();" value="toggle select state" />
</form>