I have a select form with several options. I also have a div that I would like to show ONLY when a particular option is selected. Could you guys point me in the right direction? What would be the easiest thing to use for this?
Thank you :)
Here is a simple and non-jQuery solution
window.onload=function() {
var sel = document.getElementById("sel1");
sel.onchange=function() {
document.getElementById("otherDiv").style.display=(this.value=="other")?"":"none";
}
sel.onchange(); // set the visibility onload too in case of reload
}
<select id="sel1">
.
.
.
<option value="other">Other</option>
</select>
<div id="otherDiv">Other options</div>
jQuery is a powerful javascript library that makes this kind of task trivial. Here is an example of what you're trying to do using it: jQuery - Using the radio button to show/hide a div.
Related
I'm facing an issue in selecting the dropdown first value after selecting it for the first time. When the dropdown options slidedown to select, the first value would be selected by default,bcoz of which I'm not able to select the first value. I'm using JQuery mobile framework and I'm writing custom JS to change the dropdown. I need to handle this dropdown only using custom JS and cannot make the dropdown work with this custom logic due to some other issue with my project.
Here first value im referring as 'US' from dropdown
The solution for this issue would be really appreciated. Thanks in advance.
HTML:
<select id="drpDwn">
<option value="" disabled="disabled">select</option>
<option value="US">US</option>
<option value="AU">AU</option>
<option value="NZ">NZ</option>
</select>
JS:
$(document).on('change', '#drpDwn', function () {
var index = $(this)[0].selectedIndex;
$(this).attr('selectedIndex', index);
$(this).find('option').removeAttr('selected');
$(this).find('option').eq(index).attr('selected', 'selected');
$(this).siblings('span').html($(this).find('option').eq(index).text());
});
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css
Check out this JSFiddle
The difference maker was modifying:
$(this).find('option').removeAttr('selected');
Into:
$(this).find('option:not(:selected)').removeAttr('selected');
When 'change' was triggered, the selected attribute is added to the new option, so you were stripping it away from everything even the new selection. That's why the option never changed.
Using :not(:selected) came in handy then since it will only strip away the attribute from things that weren't the current selected option.
I have hidden div tags in my html which i want to display them when a user select some category, but i have more hidden divs becuase its a big site. And i should display them when a user select certain category.
My problem here is that i'm new to jQuery and i really dont know if this is the right way but i know that i have problem doing like this way in this fiddle :
Here is a fiddle to check
There is no problem when i first select the first category but then when i select some other and back again to the first problem dont work properly. I dont understand where can be the problem.
Or should i use this all slideDown in one category on change function ?
If someone can help me here in this situations and give me a very proper way of using slideDown like in this situations.
Thanks.
i would do it this way
$(document).ready(function () {
$('#dropdown').on('change', function () {
$('.common-class-for-all-hidden-divs').hide();
var selection = $(this).val();
$('#category_show_'+selection).show('slow');
});
});
one of the hidden divs example
<div id="category_show_3" class="common-class-for-all-hidden-divs" >
<select name="category_show_3">
<option value="">category_show_3</option>
<option value="1">category_show_3</option>
<option value="2">category_show_3</option>
<option value="3">category_show_3</option>
<option value="4">category_show_3</option>
<option value="5">category_show_3</option>
</select>
</div>
css part --
.common-class-for-all-hidden-divs{
display:none;
}
I have currently got a 2-tier javascript drop down box attached to my form, and i am looking to add another 3-tiers, but completely seperate to my current javascript and can't unfortunately figure it out (quite new to javascript :( )
Here what I have so far, it all works ( not even sure what framework to select on fiddle for it to display properly lol :( the embarassment haha
Any help is appreciated <3
This will probably be enough code for you to get the idea.
jsFiddle here
I used jQuery to get handles to the various DOM elements. Here is a quite decent resource for browsing all jQuery selectors, events, effects, css, etc - despite the source. (Just keep hitting Next Chapter)
First, this is your code for catching the optone select element's change event, removed from inline javascript (which is never a good idea):
$('select[name=optone]').change(function() {
var selval = $(this).val();
setOptions(selval);
});
Simple enough, yes?
I left your first setOptions function as is, because it works. However, I wrote the next function setOptions2() in jQuery, to show you how much less typing is required.
To catch the next select element's change event:
$('select[name=opttwo]').change(function() {
var sel2val = $(this).val();
alert('You selected: ' + sel2val);
setOptions2(sel2val);
$('#selthreeDiv').show();
});
Notice in my jsFiddle that I added a hidden div containing the 3rd select control, and I display that control when the 2nd select is changed...
Hopefully this will be of assistance.
ok I did something like this and it worked for me.
your new javascript
function setOptions2(chosen) {
var selbox = document.myform.optthree;
selbox.options.length = 0;
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('Worked', ' ');
}
}
then added some new html
<select name="opttwo" size="1" onchange="setOptions2(document.myform.optone.options[document.myform.optone.selectedIndex].value);" >
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
<select name="optthree" size="1">
<option value="Please Select Prompt Category" selected="selected">Please Select Prompt Category</option>
</select>
I need to open the Chosen dropdown via JavaScript so users do not have to click on the select to show it, how can this be done?
You can open a chosen select box via JS by doing:
$('#<id-of-your-select>_chzn').trigger('mousedown');
where <id-of-your-select> is the id of your <select> element.
For ex: if your <select> element is like <select id="foo" ...>, then the code above will become:
$('#foo_chzn').trigger('mousedown');
It is very weird but i find answer is using timeout
it somehow neet to timeout first
maybe because my element is cloned
hope useful for others
setTimeout(function(){ firstElement.trigger("chosen:open"); }, 100);
you can add the below two lines to your code it will keep your chosen always open. It worked for me.
list_start is your select element id.
("#list_start").trigger('chosen:open');
$('.chosen-drop').css('left', 0);
In the updated Chosen jquery plugin following works fine with stopPropagation.
$("#selectbox").trigger("chosen:open");
event.stopPropagation();
$(document).ready(function() {
$("#selectbox").chosen({});
$("button").click(function() {
$("#selectbox").trigger("chosen:open");
event.stopPropagation();
});
});
#selectbox {
width: 140px
}
<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script>
<select id="selectbox">
<option val="option1">Option 1</option>
<option val="option2">Option 2</option>
<option val="option3">Option 3</option>
<option val="option4">Option 4</option>
<option val="option5">Option 5</option>
<option val="option6">Option 6</option>
</select>
<button>Trigger Chosen</button>
#tzvi's answer is valuable in the in the event that you're trying to trigger chosen so that it stays open after a selection is made (IE: making multiple selections in one go). Allow me to extend this a bit (updated for chosen 1.0, by the way):
$('#selectbox').change(function() {
$('#selectbox_chosen .chosen-drop').css('left', '0');
});
$('html').click(function() {
$('#selectbox_chosen .chosen-drop').css('left', '');
});
$('#selectbox_chosen .chosen-drop').click(function(e) {
e.stopPropagation();
});
Essentially it forces the chosen dropdown to stay open by overriding some css that is usually in place by the "active" class. Then we have a couple of click events that will undo this if you click anywhere outside off the dropdown. Worked perfectly for me.
Edit:
By the way, if you really want to trigger the drop down via JS, use Chosen 1.0's API:
$('#selectbox').trigger('chosen:open')
In context of the original question, this will allow you to open the box or reopen the box after a selection is made. It will not, however, keep the box open after a selection is made (without closing for a moment).
This solves the problem,
just make sure chzn-select is the ID of your select.
chzn-drop will stay opened after users click on an option:
$('#chzn-select').change(function(event)
{
$('.chzn-drop').css('left', 0);
});
I am wondering if anyone has any experience using a JQuery plugin that converts a html
<select>
<option> Blah </option>
</select>
combo box into something (probably a div) where selecting an item acts the same as clicking a link.
I guess you could probably use javascript to handle a selection event (my javascript knowledge is a little in disrepair at the moment) and 'switch' on the value of the combo box but this seems like more of a hack.
Your advice, experience and recommendations are appreciated.
The simple solution is to use
$("#mySelect").change(function() {
document.location = this.value;
});
This creates an onchange event on the select box that redirects you to the url stored in the value field of the selected option.
I'm not sure where you want to link to when you click the Div, but given something like this perhaps would work:
<select id="mySelect">
<option value="1">Option 1</option>
<option value="2">Option 2</options>
</select>
<div id="myDiv"/>
and the following JQuery creates a list of <div> elements, a goes to a URL based on the value of the option:
$("#mySelect option").each(function() {
$("<div>" + $(this).text() + "</div>").appendTo($("#myDiv")).bind("click", $(this).val(), function(event) {
location.href = "goto.php?id=" + event.data;
});
});
$("#mySelect").remove();
Does this do what you want?
If you're going to have a lot of select boxes that you want to allow to use as redirects, without having to define them independently, try something similar to:
$("[id*='COMMON_NAME']").change(function() {
document.location = this.value;
});
And have your select boxes be named accordingly:
<select id="COMMON_NAME_001">...</select>
<select id="COMMON_NAME_002">...</select>
This creates a onchange event for all IDs containing "COMMON_NAME" to do a redirect of the <option> value.
This bit of javascript in the 'select':
onchange="if(this.options[this.selectedIndex].value!=''){this.form.submit()}"
It's not ideal (because form submissions in ASP.NET MVC which I'm using don't appear to use the routing engine for URLs) but it does its job.