Develop Reference

Cloning Select2 with Jquery

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

How to unhide select tag HTML?

I am trying to do the following in HTML and JavaScript:
I am using Select tag (HTML) that will be hidden until a user clicks on No.
If the user click on No, then the Select options appears and if the user select Yes, the Select options disappear. This function works great with input and other tags, but not select tag.
I did a lot of research and I found out that the display:none and select tag does not work with Google Chrome and IE, but all the solutions were given in JQuery and ASP.net. Since I am still new to all of this, I was wondering if there is a solution using HTML and JavaScript?
Code HTML:
<div id="divMetSpec" class="fieldRow">
<div class="leftLabel labelWidth20">
<label for="">Met Spec Upon Return:</label>
</div>
<div class="leftField">
<div class="formField68">
<input id="rbMetSpec" name="rbMetSpec" type="radio"
class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="Yes"
onclick="javascript:KitFailure();" />Yes
<input id="rbMetSpec1" name="rbMetSpec" type="radio"
class="radiobuttonfield" alt="Met Spec" title="Met Spec" value="No"
onclick="javascript:KitFailure();" />No
</div>
</div>
</div>
<div id="KitFailure" style="display:none">
<p class="indent">To select multiple options - Please hold down the Ctrl
button to select:</p>
<div class="leftLabel labelWidth20">
<label for="txtKitFailure">Specify Failure:</label>
</div>
<div class="leftField">
<div class="formField40">
<select id="txtKitFailure" type="text" class="fieldRow"
name="KitFailure" multiple size="5">
<option value="Failure1">Failure 1</option>
<option value="Failure2">Failure 2</option>
<option value="Failure3">Failure 3</option>
<option value="Failure4">Failure 4</option>
<option value="Failure5">Failure 5</option>
<option value="Failure6">Failure 6</option>
<option value="Failure7">Failure 7</option>
<option value="Failure8">Failure 8</option>
</select>
</div>
</div>
</div>
Code JavaScript:
function KitFailure() {
if (document.getElementById('rbMetSpec1').checked) {
document.getElementById('KitFailure').style.display = 'none';
} else document.getElementById('KitFailure').style.display = 'block';
}
Thank you in advance for your help.
Irene

It works as is in IE11 + emulations, FF, Chrome, and Safari for Windows.
Some corrections:
type="text" is not valid attribute of select
Also use multiple="multiple"
Alt is not valid attribute of input

Clear content of multiple selected items in a div with onChange event

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".

How to show specific content based on 3 drop down selections?

I would like to display a div depending on a user's selection from two drop down lists.
While I'm going to display 3 dropdown options to the users, I'm only going to generate the output based on the selection of the first two:
This means that I will have a total of 9 possible outputs based on the user's selection:
Beaches --> Chill
Beaches --> Fast-Paced
Beaches --> Both
Museums --> Chill
Museums --> Fast-Paced
Museums --> Both
Mountains --> Chill
Mountains --> Fast-Paced
Mountains --> Both
Just for similar reference, a few months ago, I used the following script to generate a specific output based on 2 drop down selections:
http://jsfiddle.net/barmar/ys3GS/2/
<body>
<h2>Find your Animal Name</h2>
<p>Select your birth month and your favorite color and find your animal name.</p>
<form>
<select id="month">
<option value="">- birth month -</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<label class="January" for="January">January Name</label>
<label class="February" for="February">February Name</label>
<label class="March" for="March">March Name</label>
<label class="April" for="April">April Name</label>
<label class="May" for="May">May Name</label>
<label class="June" for="June">June Name</label>
<label class="July" for="July">July Name</label>
<label class="August" for="August">August Name</label>
<label class="September" for="September">September Name</label>
<label class="October" for="October">October Name</label>
<label class="November" for="November">November Name</label>
<label class="December" for="December">December Name</label>
<select id="color">
<option value="">- favorite color -</option>
<option value="Green">Green</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
</select>
<label class="Green" for="Green">Green Name</label>
<label class="Blue" for="Blue">Blue Name</label>
<label class="Red" for="Red">Red Name</label>
</form>
<p id="output"></p>
</body>
But this need is a little different. Any thoughts on how I can achieve this? In other words – once the user selected the two options, I want the corresponding div (out of the 9 options) to show up below.
Thanks so much!

You can create 9 div elements and each div element will have two data attributes. One for travel preference and one for style. Like so:
<div class="result" data-preference="beaches" data-style="chill"></div>
<div class="result" data-preference="beaches" data-style="fast-paced"></div>
<div class="result" data-preference="beaches" data-style="both"></div>
<div class="result" data-preference="museums" data-style="chill"></div>
<div class="result" data-preference="museums" data-style="fast-paced"></div>
<div class="result" data-preference="museums" data-style="both"></div>
<div class="result" data-preference="mountains" data-style="chill"></div>
<div class="result" data-preference="mountains" data-style="fast-paced"></div>
<div class="result" data-preference="mountains" data-style="both"></div>
<style>
.result {display:none;}
.result.active {display:block;}
</style>
Also, let's go ahead and add some CSS to hide these div elements, and then setup an active class so that we can display the div once the user has made their selections.
The select elements where the user makes a choice will have options, and each value will have to be identical to the data-preference and data-style values. When a user has made a selection in both of the dropdowns we'll grab all the div's and filter out the one that has the matching data attributes.
$('#preference, #style').on('change', function(){
// set reference to select elements
var preference = $('#preference');
var style = $('#style');
// check if user has made a selection on both dropdowns
if ( preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0 ) {
// remove active class from current active div element
$('.result.active').removeClass('active');
// get all result divs, and filter for matching data attributes
$('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');
}
});
jsfiddle: http://jsfiddle.net/EFM9b/1/

The following is jQuery will work for any number of select fields. It uses the values of the options as CSS classes which are then used to match against the results boxes.
No hiding or showing of the results happens until all select boxes are chosen.
JSFiddle
http://jsfiddle.net/chnZP/
CSS
#results-container > div { display: none; }
HTML
<div id='select-container'>
<select>http://jsfiddle.net/9Qpjg/15/#update
<option value='none'>Select Option</option>
<option value='alpha'>Alpha</option>
</select>
<select>
<option value='none'>Select Option</option>
<option value='red'>Red</option>
<option value='blue'>Blue</option>
</select>
<select>
<option value='none'>Select Option</option>
<option value='dog'>Dog</option>
<option value='cat'>Cat</option>
</select>
</div>
<div id='results-container'>
<div class='dog red alpha'> Alpha Red Dog</div>
<div class='dog blue alpha'> Alpha Blue Dog</div>
<div class='cat red alpha'> Alpha Red Cat</div>
<div class='cat blue alpha'> Alpha Blue Cat</div>
<div>
JavaScript
jQuery(function($){
var
selects = $('#select-container select'),
results = $('#results-container > div');
selects.change(function(){
var values = '';
selects.each(function(){
values += '.' + $(this).val();
});
results.filter(values).show().siblings().hide();
});
});

Careful naming of your divs will get you most of the way there, e.g.
<div class='itinerary' id="beaches_chill">...</div>
<div class='itinerary' id="beaches_fast-paced">...</div>
...
<div class='itinerary' id="mountains_both">...</div>
Now show or hide these based on your dropdowns:
$('#preference, #style').change(function() {
$('.itinerary').hide();
$('#' + $('#preference option:selected').val() + '_' + $('#style option:selected').val()).show();
});
(Another answer here suggests using attributes--that's nicer than using the id, so do that.)

How to display content depending on dropdown menue user selection

I have a dropdown menu at the bottom of a form with 6 different options.
I need to display different content on a div below this menu depending on which option is selected.
No additional content should be visible until the user is to select one of the options and once the user select one of the options only content associated with that specific option should be visible.
I need to create this functionality using JavaScript but my knowledge of JavaScript is very limited and I don’t seem to find what I need online.
I believe what I need to do is create 6 different divs(one for each option) and toggle
a class that makes them visilble once its respective title is selected.
Here is the dropdown menu that I have:
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
Any help will be greatly appreciated.

I added the divs you mentioned and gave each an id which makes the Javascript a little easier.
Javascript
var ids=["student", "educator", "parent", "not-school", "publisher"];
var dropDown = document.getElementById("roleSel");
dropDown.onchange = function(){
for(var x = 0; x < ids.length; x++){
document.getElementById(ids[x]).style.display="none";
}
document.getElementById(this.value).style.display = "block";
}
HTML
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select id="roleSel" class="cbx" tabindex="50" name="role">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<div id="student" class="hidden">Student div</div>
<div id="educator" class="hidden">Educator div</div>
<div id="parent" class="hidden">Student div</div>
<div id="not-school" class="hidden">Not School div</div>
<div id="publisher" class="hidden">Student div</div>
Working Example http://jsfiddle.net/qbzmz/

use the onchange function like so
<div class="field">
<label for="roleBox" data-label="I_AM">{% trans %} main.I_AM_TITLE {% endtrans %}</label>
<div class="f-wrapper">
<select class="cbx" id="selctor" tabindex="50" name="role" onchange="selectChanged();">
<option value="student">A Student</option>
<option value="educator">An Educator</option>
<option value="parent">A parent signing up for my child</option>
<option value="not-school">Not in school but still learning</option>
<option value="publisher">A Publisher or interested Kno partner</option>
</select>
</div>
</div>
<script>
function selectChanged(){
//get the value of selector and act upon it
//i would use jquery to do this stuff
}
</script>