i have created dynamic drop down
loading second drop down using first selected value
now what i need is i need to display the following css(tic icon) next to first drop down
code
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
the CSS is added in JSfiddleand full Jsfiddle
i need like this when second drop down is loaded i need output like this
You can make it like this http://jsfiddle.net/4yL0871f/2/
The CODE
$(function () {
$("#text-one").change(function () {
$("#checkmark").css({display: 'inline-block'});
$("#text-two").show();
$("#text-two").load("textdata/" + $(this).val() + ".txt");
});
});
HTML
<div id="page-wrap">
<h1>Pulls from text files</h1>
<div class="select-wrap">
<select id="text-one">
<option selected value="base">Please Select</option>
<option value="beverages">Beverages</option>
<option value="snacks">Snacks</option>
</select>
<span id="checkmark">
<div id="circle"></div>
<div id="stem"></div>
<div id="kick"></div>
</span>
</div>
<select id="text-two" style="display :none">
<option>Please choose from above</option>
</select>
</div>
Related
I have a categories dropdown and multiple divs with class names, i want when the user selects and option from the dropdown to filter the divs according to the chosen option, like for example i have a category called makeup when the user selects it i want to only show the divs with the class makeup, here is what i have tried:
$('#categories').change(function() {
var val = $(this).val();
if (val == "makeup") {
$('.makeup').fadeIn();
} else {
$(".makeup").not('.' + value).fadeOut();
$('.makeup').filter('.' + value).fadeIn();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="makeup">
Div 1
</div>
<div class="makeup">
Div 2
</div>
<div class="makeup">
Div 3
</div>
<div class="other">
Div 4
</div>
Put a common class "category" on all the divs.
Bind the change handler to the select
When it changes, fadeOut all the options, and fadeIn the ones that match the value as a class
$('#categories').on('change', function(e) {
$('.category')
.fadeOut()
.filter('.'+ e.target.value)
.fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category makeup">
Div 1
</div>
<div class="category makeup">
Div 2
</div>
<div class="category makeup">
Div 3
</div>
<div class="category other">
Div 4
</div>
This code works as requested, I've just added the class .category-option to the elements you are fading in and out.
Demo
$('#categories').change(function() {
// Get value of selected option
var val = $(this).children("option:selected").val();
// Fadeout all that are not linked
$(".category-option").fadeOut();
// Fade in appropriate options
$(".category-option." + val).fadeIn();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
<option selected disabled>Choose category</option>
<option value="makeup">Make-up</option>
<option value="cafes">Cafes</option>
<option value="other">Other</option>
</select>
<div class="category-option makeup">
Div 1
</div>
<div class="category-option makeup">
Div 2
</div>
<div class="category-option makeup">
Div 3
</div>
<div class="category-option other">
Div 4
</div>
Is it possible to hide a option in select with div, and then use style.display = "none"
Html code I have used:
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts</option>
<div class="options" id="text"><option value="2">Text</option></div>
<div class="options" id="text1"><option value="3">Text1</option></div>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
</div>
Javascript I try to use to hide the options if variable is false
var readtext = false;
if (readtext == true) {
document.getElementById('text').style.display = "block";
} else {
document.getElementById('text').style.display = "none";
}
You can't directly. Instead, you have to use (or write) javascript library which will demonstrate divs for select options. Just like Select2 jQuery library does.
You can't use display:none for hiding options in select, if you want to hide option you can use something like
$( "#status option[value=1]" ).wrap( "<span>" );
and to again show the particular option use
if ( $( "#status option[value=2]" ).parent().is( "span" ) ){
$( "#status option[value=2]" ).unwrap();
}
This should do the work for you.
Remove divs, use just options.
Here your code without divs.
http://codepen.io/anon/pen/ryOeWo
<div class="test">
<div class="optioncheck" id="text place">
<select id="status" onChange="myFunction()">
<option value="1">Texts </option>
<option id="text" value="2">Text</option>
<option value="3">Text1</option>
</select>
</div>
<div class="optioncheck" id="map" style="display:none;">
Text
<div class="optioncheck" id="map1" style="display:none;">
Text
</div>
</div>
If you just wish to hide some options other than the first option.You can do that via simple javascript.
Refer to this fiddle:
https://jsfiddle.net/ysd8w8sk/
Let's say we have following html:
<select id="fruits_dropdown">
<option value='1' > Apple </option>
<option value ='2'> Banana </option>
<option value ='3'> Orange </option>
<option value ='4'> Cherry </option>
</select>
Then we can hide option 2 and 3 like this :
document.querySelector('#fruits_dropdown option[ value="2"]').style.display='None';
document.querySelector('#fruits_dropdown option[ value="3"]').style.display='None';
I am having an issue with cloning a div with a select2 drop down.
When the first one is shown on the initial page load, the select2 works fine. When I click the button to clone it, the next select2 doesn't. It's like it's disabled and doesn't work.
My code is as follows;
<div class="input-main white_bg cloneneedsanalysis">
<div class="action-input clone-needs-analysis">
<div class="action-input-white-shorter">
<div class="inner-sub-title-less-padding">
<p>Audience Analysis</p>
</div>
<div class="col-md-12">
<div class="form-group">
<select class="select2 select2-multiple need_analysis_selector" multiple="multiple" data-placeholder="Choose ..." name="needs_analysis[]">
<option value="">-- Choose Audience Categories --</option>
<option value="536"> Finance - - Cash collection</option>
<option value="537">IT - - Comms IT</option>
<option value="538">Strategy - - Strategy team 1</option>
</select>
</div>
</div>
</div>
<div class="action-input-plus-needs-analysis">
<a href="#" class="clone_needs_analysis_button">
<img src="http://www.test.com/assets/images/plus.jpg"></a>
</div>
<div class="action-input-remove-needs-analysis">
<a href="#" class="remove_needs_anaylsis_button">
<img src="http://www.test.com/assets/images/minus.jpg"></a>
</div>
</div>
</div>
$(document).on('click', '.clone_needs_analysis_button', function(e) {
e.preventDefault();
$(this).closest('.clone-needs-analysis').clone().insertAfter('.cloneneedsanalysis:last');
$(this).closest('.action-input-plus').hide();
$(this).closest('.action-input-remove').removeClass('hidden');
$('.select2').select2();
});
Use $(this).closest('.clone-needs-analysis').clone(true, true) instead of $(this).closest('.clone-needs-analysis').clone().
You need to specify the true, true parameters to tell JQuery to also clone the attached events.
Check the documentation here
I need to clear the mutiple selected items of a div as soon as I hit a select button with onChange event as below.
<div ng-show="currentDetails.type=='product_available_in_order'">
<label> Product Filters : </label>
<div style="padding-left: 10px;">
<label>Products Group</label>
<br/>
<select ng-model="currentDetails.settings.product_filters.group" onChange="clrContentInabc ()">
<option value="products">Products</option>
<option value="categories">Specific Categories</option>
<option value="collections">Specific Collections</option>
</select>
<label>Select {{currentDetails.settings.product_filters.group}}</label>
<div ng-show="currentDetails.settings.product_filters.group" id="abc">
<select ng-model="currentDetails.settings.product_filters[currentDetails.settings.product_filters.group]"
id="e2" multiple="multiple"
style="width: 100%;"
ng-options="option.alias as option.name for option in ComplimentData[currentDetails.settings.product_filters.group]">
</select>
</div>
</div>
<script type="text/javascript">
function clrContentInabc(){
WHAT TO DO HERE???
}
</script>
</div>
The div "abc" must be set to default value i.e. Blank. I have already used the empty() function but it results in not loading the options of select. I've also tried .val("") or innerHTML,html("") and they all result in not loading the div "abc".
Updated: I would like to control the visibility of the bottom divs based on the value of the top SELECT..
i.e
selected = dogs:: only bulldog, pitbull visible
selected = fish:: GOLDFISH! visible
etc..
Appreciate it.. Sorry I didn't do a better job of explaining my question initially -
<select>
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="dog">bulldog</div>
<div id="cat">stray cat</div>
<div id="dog">pitbull</div>
<div id="cat">alley cat</div>
<div id="fish">GOLDFISH!</div>
Try this
$('#pets').change(function() {
$('#somepets div').hide();
$('#somepets div.' + $(this).val()).show();
});
But for this you should change your class names to match the values of the options. Also you need to give your "select" element an ID.
EDIT: To clarify a bit, this selector is going to try and find the select element by its ID "pets" so you need to add id="pets". The name and ID can be the same value.
EDIT: Since you're having some trouble with the HTML here is what it would need to look like to work with my method.
<select id="pets">
<option value="dog">dog</option>
<option value="cat">cat</option>
<option value="fish">fish</option>
</select>
<div id="somepets">
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
function selectionChanged(){
HideAll();
var selected=$('#pets option:selected').text();
var selectString='.';
selectString+=selected;
$(selectString).show();
};
function HideAll(){
$('.dog').hide();
$('.cat').hide();
$('.fish').hide();
};
</script>
<select id="pets" onchange="selectionChanged()">
<option>dog</option>
<option>cat</option>
<option>fish</option>
</select>
<div id=somepets>
<div class="dog">bulldog</div>
<div class="cat">stray cat</div>
<div class="dog">pitbull</div>
<div class="cat">alley cat</div>
<div class="fish">GOLDFISH!</div>
</div>