I have used this multiselect checkbox with a combobox option..
JsFiddle
In my jsfiddle that checkbox with a combobox type will not work. I have too many codes. So, I didn't included. See this link for full codes I'm trying to show and hide the div content depending upon selected checkbox. it does not work. I tried this code separately (without a combobox checkbox only). it works. I have problem with checkbox with a combobox type. How do I show/hide div content based upon selected checkbox with combobox option?
Without Combobox Fiddle
Javascript
document.getElementById("option_1").onclick = function() {
if(this.checked)
document.getElementById('choose_the_correct_answer').style.display = "block";
else
document.getElementById('choose_the_correct_answer').style.display = "none";
}
I have tried this Jquery code too
$(document).ready(function(){
$('#option_1').on('change', function() {
if ( this.value == '1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
HTML
<select id="control_3" name="control_3[]" multiple="multiple" size="5">
<option value=""></option>
<option id="option_1" value="option_1">Choose the Correct Answer</option>
<option id="option_2" value="option_2">Fill in the Blanks</option>
<option id="option_3" value="option_3">True or False</option>
<option id="option_4" value="option_4">Match the Following</option>
<option id="option_5" value="option_5">Two Mark Questions</option>
<option id="option_6" value="option_6">Five Mark Questions</option>
<option id="option_7" value="option_7">Others</option>
</select>
<div id="choose_the_correct_answer">choose the correct answer</div>
<div id="fill_in_the_blanks">fill in the blanks</div>
<div id="true_or_false">true or false</div>
<div id="match_the_following">match the following</div>
<div id="two_mark_questions">two mark questions</div>
<div id="five_mark_qustions">five mark questions</div>
<div id="others">others</div>
try
$('#option_1').on('click', function() {
});
and
the condition should be
if ( this.value == 'option_1')
JSFIDDLE
$(document).ready(function(){
$('#option_1').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").show();
}
else
{
$("#choose_the_correct_answer").hide();
}
});
});
UPDATE:
AND a better option will be to use .togggle() if you intend to use multiselect
UPDATED DEMO
JS:
$(document).ready(function(){
$('option').on('click', function() {
if ( this.value == 'option_1')
{
$("#choose_the_correct_answer").toggle();
}
else if ( this.value == 'option_2')
{
$("#fill_in_the_blanks").toggle();
}
else if ( this.value == 'option_3')
{
$("#true_or_false").toggle();
}
else if ( this.value == 'option_4')
{
$("#match_the_following").toggle();
}
else if ( this.value == 'option_5')
{
$("#two_mark_questions").toggle();
}
else if ( this.value == 'option_6')
{
$("#five_mark_qustions").toggle();
}
else if ( this.value == 'option_7')
{
$("#others").toggle();
}
});
});
New Update: using normal dropdown with multiselect
use
$('select').on('change', function() {
FIDDLE
Related
I have this jquery function but it is too long for me. Is there any way to make as one jquery change function. I need your help.
$(document).ready(function () {
$('.sub-cat select').change(function () {
if ($('.sub-cat select option:selected').text() == "Other") {
$('.sub-cat .other-category').show();
}
else {
$('.sub-cat .other-category').hide();
}
});
$('.prod-type select').change(function () {
if ($('.prod-type select option:selected').text() == "Other") {
$('.prod-type .other-category').show();
}
else {
$('.prod-type .other-category').hide();
}
});
$('.prod-finnish select').change(function () {
if ($('.prod-finnish select option:selected').text() == "Other") {
$('.prod-finnish .other-category').show();
}
else {
$('.prod-finnish .other-category').hide();
}
});
$('.prod-color select').change(function () {
if ($('.prod-color select option:selected').text() == "Other") {
$('.prod-color .other-category').show();
}
else {
$('.prod-color .other-category').hide();
}
});
$('.prod-included select').change(function () {
if ($('.prod-included select option:selected').text() == "Other") {
$('.prod-included .other-category').show();
}
else {
$('.prod-included .other-category').hide();
}
});
$('.prod-series select').change(function () {
if ($('.prod-series select option:selected').text() == "Other") {
$('.prod-series .other-category').show();
}
else {
$('.prod-series .other-category').hide();
}
});
});
Assign a common class i.e. 'commonClass' to all the parent element i.e. 'sub-cat, prod-included,...', then use various DOM traversal methods to target 'other-category' element.
Learn to use this, element which initiated the event
$('.commonClass select').change(function () {
$(this).closest('.commonClass').find('.other-category').toggle($('option:selected', this).text() == "Other");
});
References
.closest()
.find()
.toggle()
Please check below code. On selection of other option
$(document).ready(function () {
$('select').change(function () {
if($(this).find('option:selected').text() == "other"){
$(this).next().show();
}
else{
$(this).next().hide();
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
<div class="sub-cat">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="other">other</option>
</select>
<div class="other-category" style="display: none;">
<p>sub-cat other-category</p>
</div>
</div>
<div class="prod-type">
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
<option value="other">other</option>
</select>
<div class="other-category" style="display: none;">
<p>prod-type other-category</p>
</div>
</div>
</body>
</html>
show below div .
You can select several elements at once by separating their class selections with a comma.
$('.sub-cat, .prod-type, .prod-finnish, .prod-color, .prod-included, .prod-series').change(function() {
var $this = $(this); // cache this so we don't have to wrap it twice
$this.toggle($this.find('option:selected').text() == "Other"));
});
It's then just a matter of using .toggle() and passing in a boolean; In our case whether the selected option has "Other" as its text.
This has a really good performance advantage since you only need one event delegate to handle the change event for all the elements in the selector.
You can utilize data-attributes to help you out. I didnt test out this code, but I think something like this could possibly work. Update your HTML to be something like this
<select data-target="sub-cat"></select>
<div class="other-category" data-target="sub-cat"></div>
Followed by this abbreviated jquery code...
$(document).ready(function () {
$('select').change(function() {
var target = $(this).data('target'),
isSelected = $(that).find('option:selected').text() == "Other";
$(this).find('.other-category[data-target="'+target+'"]').toggleClass(isSelected);
})
});
By storing the attributes in a data-attribute, you can easily access that in your javascript code, targeting specific elements much more easily.
So I have a dropdown menu. The id for this dropdown menu is "courses". This dropdown also has an additional attribute, onclick="displayField();
The dropdown has 2 options.
2 and 3.
Now, I want everything with the class rsform-block-cotecours1 to be hidden depending on which option is chosen.
Here is the JavaScript for that:
function displayField()
{
if(document.getElementById("courses").text == '2';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="none";
if(document.getElementById("courses").text == '3';)
document.getElementsByClassName('rsform-block-cotecours1').style.display="";
}
window.addEvent('domready', function() {
displayField();
});
However, this doesn't work, and I don't know why.
Is this what you are looking for?
Fiddle: fiddle
<select id="courses" onchange="ddlChange()">
<option value="2">2</option>
<option value="3">3</option>
</select>
JavaScript
function ddlChange() {
if (document.getElementById("courses").value =="2"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
alert(document.getElementById("courses").value );
}
if (document.getElementById("courses").value == "3"){
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="block";
alert(document.getElementById("courses").value );
}
}
Change the code to following and test
function displayField()
{
if(document.getElementById("courses").value == '2';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="none";
if(document.getElementById("courses").value == '3';)
document.getElementsByClassName('rsform-block-cotecours1')[0].style.display="";
}
window.addEvent('domready', function() {
displayField();
});
in case you want to access the ext and not the value of dropdown list in javascript, then use following code to access the text of selected option from drop down
var courseElement = document.getElementById("courses");
var text = "";
if (courseElement.selectedIndex != -1)
{
text = courseElement.options[courseElement.selectedIndex].text;
}
have this code, i want to convert it to be able to allow the user to pick ANY possible select and have div [id='setprice'] show up or something to that effect. currently i have 4 options, but it could be up to 10+ depends on how many are in the database. but it shouldn't matter, i just want which ever gets selected to open the setprice div. Thanks.
$("#category").change(function () {
$("#setprice").hide();
if ($(this).val() == "cow") { $("[id='setprice']").show(); }
else if ($(this).val() == "dog") { $("[id='setprice']").show(); }
else if ($(this).val() == "monkey") { $("[id='setprice']").show(); }
else if ($(this).val() == "kungfoo") { $("[id='setprice']").show(); }
});
HTML
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice'>this is hidden onload, then shows on any #category selection</div>
Seems to be alot of cofusion in what im asking, These options i've given are random names, the categories that are going to be loaded, are from a database and more could be added depending how it expands, so i want the script to not show div=setprice, but when anything gets selected in #category to open setprice.
You will need to call the function only when the value of the select box isn't empty.
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
Here is a working fiddle.
This is the cleanest you will get this.
DEMO
$("#category").change(function () {
$("#setprice").toggle(!!this.value);
});
The $("#setprice").toggle(!!this.value); is just a way to use a boolean inside the .toggle() method,
otherwise you do it equally like:
var $setPriceEl = $("#setprice");
$("#category").change(function () {
$setPriceEl.hide(); // hide by default
if(this.value) $setPriceEl.show(); // show only if has value
});
or even:
$("#category").change(function () {
$("#setprice")[this.value ? "show" : "hide" ]();
});
Please find the answer below ...
HTML :
<select id="category">
<option value=''>Select</option>
<option value='cow'>Cow</option>
<option value='dog'>Dog</option>
<option value='monkey'>Monkey</option>
<option value='kungfoo'>kungfoo</option>
</select>
<div id='setprice' style="display:none;">this is hidden onload,
then shows on any #category selection</div>
JQUERY :
$(document).ready(function(){
$("#category").change(function() {
$("#category option:selected" ).each(function() {
var str = $( this ).text();
if(str == "Select"){
$("#setprice").hide();
}else{
$("#setprice").show();
$("#setprice").text(str);
}
});
}).trigger("change");
});
I have a dropdown on change a popup appears with a warning that change the value will do some affects. when user select no the dropdown selected index is supposed to return to initial selected option. here is what I do:
function closeDeleteVariantsPopup(){
parent.$.fn.colorbox.close();
var elementSpecies= parent.document.getElementsByClassName("speice");
for(var i = 0;i<elementSpecies[0].options.length; ++i) {
alert(parent.document.getElementById("speciesHiddenValue").value);
if(elementSpecies[0].options[i].id === parent.document.getElementById("speciesHiddenValue").value) {
alert(parent.document.getElementById("speciesHiddenValue").value);
elementSpecies[0].selectedIndex = i;
break;
}
}
}
html & freemarker:
[#spring.bind "genomicReferenceBean.specie.id"/]
<select name="specie.id" id="specie.id" [#if !(genomicReferenceBean.specie?has_content) || genomicReferenceBean.specie.id==-1] multiple="multiple" [/#if] class='speice singleList' onchange='getMaterials()' >
[#if genomicReferenceInitializerBean.species?has_content]
[#list genomicReferenceInitializerBean.species as initializerValueBean]
<option for="selectSpecie" name="${initializerValueBean.name}" [#if genomicReferenceBean.specie?has_content && genomicReferenceBean.specie.id?number == initializerValueBean.id] selected="selected" [/#if] value="${initializerValueBean.id}">${initializerValueBean.name}</option>
[/#list]
[/#if]
</select>
<input type="hidden" id="speciesHiddenValue" value="${genomicReferenceBean.specie.id?number}"/>
now when I press no button the popup close and nothing happen
I used jQuery and it worked fine:
parent.$(".speice option").each(function(){
if($(this).val() === parent.document.getElementById("speciesHiddenValue").value) {
$(this).attr('selected', 'selected');
}
});
This is a follow up question. I am trying to get a input box to be hidden when a pull-down menu has the value "tid and acc". I am at a loss why this code isn't working, any help would much appreciated! Here is a link on jfiddle: http://jsfiddle.net/Mm7c7/
<script>
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Your script is being evaluated before your element is ready. Placing the script in a $(document).ready() or after the content it affects will solve the problem
http://jsfiddle.net/Wx8Jf/2
$(document).ready(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});
});
Couple problems:
You'll either need to wrap the function in $(function(){}) to ensure DOM is ready, or drop it below your HTML (the former is recommended). If you don't wrap it (or drop it), then the script is executed before the elements have actually been rendered, causing $('#rule-type') to be undefined.
Your logic is incorrect (according to your explanation). Your current logic says to hide the input box when anything other than tid and acc is selected.
Working version:
<script>
$(function(){
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').hide();
}
else {
$('#tid-acc').show();
}
});
});
</script>
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc" />
http://jsfiddle.net/dbrecht/QwkKf/
Take a look here for a working sample: http://jsfiddle.net/Mm7c7/1/
HTML:
<select id="rule-type">
<option value="" selected="selected">None</option>
<option value="tid">tid</option>
<option value="tid and acc">tid and acc</option>
<option value="xid">xid</option>
</select>
<input id="tid-acc">
Javascript:
$('#rule-type').change(function() {
var val = $(this).val();
if (val == 'tid and acc') {
$('#tid-acc').show();
}
else {
$('#tid-acc').hide();
}
});