So I'm just learning JavaScript and I'm trying to make a payment calculator for my church's daycare. I want a second div with class "child" (all the 'stuff' inside it) to be added to the div with id "children". I have it where a simple div is added with a key press but it won't add a third. How do I add more than one div and how do I add a div with all the 'stuff'? Code is below:
<div id="input">
<div id="children">
<div class="child">
<h2>Choose Child's Class</h2>
<select id="primary" class="selector">
<option value=" ">Select Class</option>
<option value=200>Infants</option>
<option value=175>Wobblers</option>
<option value=175>Toddlers</option>
<option value=165>PreSchool 3's</option>
<option value=165>PreK 4's</option>
<option value=75>Schooler Before & After</option>
<option value=40>Schooler Before Only</option>
<option value=65>Schooler After Only</option>
<option value=60>Schooler AFA Before & After</option>
<option value=20>Schooler AFA Before Only</option>
<option value=30>Schooler AFA After Only</option>
<option value=40>Part Time</option>
</select>
</div><!--closes child class div-->
</div><!--closes children id dive-->
<h3> Press any key on your keyboard to add another child</h3>
and the javaScript
$(document).ready(function(){
var $newChild=$('<div class="child">Testing</div>');
$(document).keyup(function(){
$newChild.appendTo($('#children'));
});
});
So for starters this is how your javascript should look like so you can add many divs
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$newChild.appendTo($('#children'));
});
});
or
$(document).ready(function(){
$(document).on('keyup', function(){
var $newChild=$('<div class="child">Testing</div>');
$('#children').append($newChild);
});
});
You need to clarify the rest of your question why do you mean by stuff?
Your jQuery needs to be something like:
$(document).ready(function() {
var childHtml = "<div class='child'>Child</div>";
$(document).keyup(function() {
$('#children').append(childHtml);
});
});
jsFiddle: http://jsfiddle.net/ek922tz2/7/
Related
I have a job that requires several hundred select elements on a page. I want to show each select dynamically as the previous is changed. I have a working version in which I put all the select elements in the markup, and then used a simple function to hide them all and show only the first. Then on change of each select the next is added.
This works just fine, but is obviously not ideal. I don't want to put 500 select items in the markup and hide them all for no reason, and my JS function would be 1500 lines long. Plus that would make me feel silly.
How can I automate this process with JS?
I do not need each select to have a unique id, but I do need each select to have a unique and incremented name. Is this possible? I have a working fiddle.
HTML:
<select name="select-one" class="hidden" id="one">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-two" class="hidden" id="two">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-three" class="hidden" id="three">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
<select name="select-four" class="hidden" id="four">
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
JS:
$(document).ready(function() {
$('.hidden').hide();
$('#one').show();
$('#one').change(function(){
$('#two').show();
});
$('#two').change(function(){
$('#three').show();
});
$('#three').change(function(){
$('#four').show();
});
// and so forth...
});
HTML:
<select class="hidden" id="one" name='name_0'>
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
jQuery
$('select').on('change', function() {
$('body').append($(this).clone(true))
})
Result:
Note we are using the overload of the clone() method. This means event handlers and data will be copied along with the elements. So whatever event handler you attached to the original select gets cloned.
If you want to increment the name just use a counter and add the attribute after the clone:
cnt=0;
$('select').on('change', function() {
cnt++
$('body').append($(this).clone(true).attr('name', 'name_' + cnt))
})
My solution:
CSS
.hidden {
display: none;
}
JS
const createSelect = index => `
<select name="select-${index}" class="hidden select" data-index=${index}>
<option value="">not this one</option>
<option value="">pick this one</option>
</select>
`;
$(document).ready(function() {
// Generate 100 selects
for (let i = 0; i < 100; i++) {
$("body").append(createSelect(i));
}
// Show first select
$(`.select[data-index='0']`).show();
$('.select').on('change', function() {
// Store index of a select currently changed
const index = parseInt($(this).attr('data-index'), 10);
// Show next select
$(`.select[data-index='${index + 1}']`).show();
});
});
I have a dropdown with two tiers. I want to get the option value from the item selected from the second dropdown list.
I have figured out how to do this for the first list, but I want to be able to grab the value for -any- list. In my jsfiddle, you'll see there's a value in console.log for any of the items in the Pie list when you click on them, but not for any of the items in the Trees or Cars lists when they're clicked.
I thought I could just give all of the selection lists the same ID, but apparently not. Any suggestions? I've done some searching, but haven't found what I'm looking for. I'm using D3 and jQuery already, so those are good, but plain javascript is also fine. Thanks!
jsfiddle is here.
<div class="ccms_form_element cfdiv_custom" id="indSelectors">
<label>Type:</label>
<select size="1" id="dropStyle" class=" validate['required']" title="" type="select" name="style">
<option value="">-Select-</option>
<option value="Pies">Pies</option>
<option value="Trees">Trees</option>
<option value="Cars">Cars</option>
</select>
<div class="clear"></div>
<div id="error-message-style"></div>
</div>
<div id="Pies" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Pies</label>
<select id="inds">
<option value="">- Select -</option>
<option value="28">Apple</option>
<option value="3">Cherry</option>
<option value="44">Pumpkin</option>
</select>
</div>
<div id="Trees" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Trees</label>
<select id="inds">
<option value="">- Select -</option>
<option value="38">Maple</option>
<option value="11">Oak</option>
<option value="14">Birch</option>
</select>
</div>
<div id="Cars" class="style-sub-1" style="display: none;" name="stylesub1">
<label>Cars</label>
<select id="inds">
<option value="">- Select -</option>
<option value="39">Mazda</option>
<option value="62">Ford</option>
<option value="25">Toyota</option>
</select>
</div>
<div class="clear"></div><div id="error-message-style-sub-1"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dropStyle").change(function () {
var targID = $(this).val();
$("div.style-sub-1").hide();
$('#' + targID).show();
})
d3.select('#inds')
.on("change", function () {
var sect = document.getElementById("inds");
var section = sect.options[sect.selectedIndex].value;
console.log("section:", section);
// do other stuff with the section name
});
</script>
Element IDs should be unique within the entire document and it is not a good practice to have same id for multiple elements.
what does document.getElementById("inds") or $("#inds") return? You will get the first element always.
Rather, use a class. Just change id="inds" to class="inds" and update code like below.
$('.inds')
.on("change", function () {
var section = $(this).val();
console.log("section:", section);
// do other stuff with the section name
});
Updated Fiddle
Try this jQuery Plugin
https://code.google.com/p/jquery-option-tree/
Demonstration:
http://kotowicz.net/jquery-option-tree/demo/demo.html
I am using a lightbox called featherlight. I have a form inside of that lightbox that requires a dynamic select option to change the content of the next question select box.
The select box works outside of the lightbox yet inside it fails.
Any ideas where I appear to be going wrong?
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('select').change(function(){ // when one changes
$('select').val( $(this).val() ) // they all change
})
})
</script>
Your HTML is most likely being added after the handlers are bound - you can use .on to get around this:
$(document).on("change", "select", function() {
$('select').val( this.value )
});
You should replace document with a container that is present at the time of page load and contains your dynamic content - else this event is going to fire each time the document is changed (and check if a select was actually changed)
With a common class:
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
<select class="common">
<option value="111">111</option>
<option value="222">222</option>
</select>
$(document).on("change", "select.common", function() {
$("select.common").not(this).val( this.value ) //added .not(this) since we dont need to change the value of the select being interacted with
});
have unique id for both select as follow
<select id='select1'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<select id='select2'>
<option value="111">111</option>
<option value="222">222</option>
</select>
<script type="text/javascript">
$(function(){
$('#select1').change(function(){ // when one changes
$('#select2').val( $(this).val() ) // they all change
})
})
</script>
Updated
I guess you are accessing parent element from child window
try the following
window.parent.$(#select2.val( $(this).val());
Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});
Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.
This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO
I'm trying to update the value of a select input when I change the value of another select input. I cannot get anything to happen on the page and want to make sure I don't have a syntax error or some other dumb thing in this code.
<div class="group">
<div class="inputs types">
<strong style="font-size:13px;">Category:</strong>
<select name="id" id="ctlJob">
<option value="1">Automotive</option>
<option value="2">Business 2 Business</option>
<option value="3">Computers</option>
<option value="4">Education</option>
<option value="5">Entertainment & The Arts</option>
<option value="6">Food & Dining</option>
<option value="7">Government & Community</option>
<option value="8">Health & Beauty</option>
<option value="9">Home & Garden</option>
<option value="10">Legal & Financial Services</option>
<option value="11">Professional Services</option>
<option value="12">Real Estate</option>
<option value="13">Recreation & Sports</option>
<option value="14">Retail Shopping</option>
<option value="15">Travel & Lodging</option>
</select>
<select name="type" id="ctlPerson"></select>
</div>
</div>
<script>
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
$('#ctlPerson').html('<option value="123">ascd</option>');
});
});
</script>
Try using append instead:
$(function() {
$("#ctlJob").change(function() {
//Get the current value of the select
var val = $(this).val();
var ctl = $('#ctlPerson').append('<option value="123">'+val+'</option>')[0].options;
ctl.selectedIndex = ctl.length-1;
});
});
http://jsfiddle.net/J69q8/
I think you also need to set the 'selected' property. Add
$('#ctlPerson option[value="123"]').attr('selected', 'selected');
to the end of the script. You are currently adding the option to the select list, but are not changing the select list to show it.
<div id="test">
<select name="sel" id="sel">
<option name="1" id="1" value="1">Automotive</option>
<option name="2" id="1 value="2">Business 2 Business</option>
<option name="3" id="1 value="3">Computers</option>
</select>
<select name="sel2" id="sel2"></select>
</div>
<script>
$("#sel").change(function() {
var val = $(this).val();
$('#sel2').html('<option value="1">NEW</option>');
)};
</script>
this works fine for what you need to do.
it's something like what you have