I want to create one or more div dynamically based on selected values in dropdown.
HTML code:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
If I select 2 from the dropdown means, two div will create, if I select 10 means 10 div will create. How can I do this?
$('select').on('change', function() {
$('#result').empty();
$.each(new Array(+this.value), function(i) {
$('<div />', {
text : 'this is div nr : '+(i+1)
}).appendTo('#result');
});
});
FIDDLE
Simple :)
var val,html = $('samplediv').clone().html(); //store the html to be appended in a sample div
$('select').change(
val = $(this).val();
for(i=0;i<val;i++)
{
$(this).after(html);
}
);
Try this
HTML
<select><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="10">10</option></select>
<span id="test">
//Here your Dynamic Divs Whenver Select Changes
</span>
Script
$('select').on('change',function(){
var value=$(this).val();
var output='';
for(var i=1;i<=value;i++)
{
output+='<div>Your Text</div>'
}
$('#test').empty().append(output);
});
DEMO
try this
HTML
<select onchange="javascript:create_div(this.value);" id="my_select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="10">10</option>
</select>
<div id="div_main"></div>
add onchange funciton in select and a div_main in which you want to insert divs
JS Script
<script>
function create_div(num)
{
alert("hi");
alert(num);
var html = "";
for(var i=1; i<=num; i++)
{
html += '<div id="div'+i+'">This is Div No - '+i+'</div>';
}
document.getElementById('div_main').innerHTML = html;
}
</script>
use above js script to create dynamic div
See JS Fiddle
Related
Tell me please, there is a code in which when you click option select, a div element is added with an option value.
But there is a problem, which is that you cannot immediately click on the first option, you must first click on the second, and only after the first. How to fix this problem?
Thank you in advance.
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
In html dropdown you can not able to select a value which already selected, so must need to add one more option in your dropdown which say "Please Select" and after that you can able to select any option. That's the right solution
See working example:-
var p = document.getElementById("inputi");
var length = 1;
function add_input_from_select(select) {
var new_input = document.createElement("input");
new_input.name = "my_input";
new_input.value = select.value;
if(!new_input.value) return false;
var div = document.createElement('div');
div.innerHTML = '<br>div элемент №' + length + '<br>';
div.appendChild(new_input);
p.appendChild(div);
length++;
}
function add_input_old() {
add_input_from_select(document.getElementById("selector"));
}
<select id="selector" onchange="add_input_from_select(this)">
<option value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<br>
<form>
<div id="inputi"><input name="my_input"></div>
</form>
This happens because you done it with onchange event so the first option is already selected thats why first time it doesn't add div so for overcome that just add one more option to html like
<select id="selector" onchange="add_input_from_select(this)">
<option value="">select Option</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
and put condition in javascript like,
if(document.getElementById("selector").value != ""){
//add your div here
}
this condition must apply because when you select first option it did not be added like select options.
does anyone know if there is a way to make a dropdown menu that when an option is chosen it then turns that option into a button using html or is that only possible in php or is it not possible at all
You will have to learn javascript to be able to do that, there is an event fired called onselect, when you bind to that event with javascript using addEventListener you will be able to read the .value of the <select> field and then create a button using the createElement method.
Try this with jQuery
<script>
$(document).ready(function(){
var sel_html = $('#element_place').html();
$('#select_button').change(function(){
var sel_option = $('#select_button').val();
$('#select_button').remove();
new_ele = $('<input>').attr('type','button').attr('value',sel_option);
$('#element_place').append(new_ele);
});
});
</script>
<div id="element_place">
<select id="select_button">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
You can use this its working
Html
<input type="button" id="conv_but" value="" style="display:none">
<select name="data_select" id="data_select" onchange="converttobutton(this.value);">
<option value="One">One</option>
<option value="Two">Two</option>
<option value="Three">Three</option>
<option value="Four">Four</option>
<option value="Five">Five</option>
<option value="Six">Six</option>
</select>
Javascript
<script type="text/javascript">
function converttobutton(selected)
{
document.getElementById('conv_but').value = selected;
document.getElementById('data_select').style.display = 'none';
document.getElementById('conv_but').style.display = '';
}
</script>
I think you need change() event handler . Create a function inside the change() event for creating the button
$("ID of the dropdownbox").change (function () {
//code for creating button(this.value) give the selected option
var $something= $('<input/>').attr({ type: 'button',
name:'btn1', value:this.value});
//append this variable inside a div having ID `button_div`
$("#button_div").append($something);
});
I am trying to understand how can I make a list of x elements when a value change.
Let's go with the example
HTML
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<div class="list"></div>
jQuery
<script>
$('.num').change(function() {
num_val = $(this).val(); // get the number of the elements that will be shown
for (i =0; i == num_val; i++) { // I do a for loop for append each div to the list but it doesn't work it's show me just 1.
$('.list').append('<div>' + i + '</div>');
}
});
</script>
So, how can I display X number element equal to the value on select input?
Change you html into:
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
or the value will be always 1, and you'll add only one element.
Than cange you loop condition into:
$('.num').change(function () {
num_val = $(this).val(); // get the number of te elements that will be shown
$('.list').empty();
for (i = 0; i < num_val; i++) { // i do a for loop for append each div to the list but it doesn't work it's show me just 1.
$('.list').append('<div>' + i + '</div>');
}
});
I used $('.list').empty(); to clear the list before append elements to it.
Demo: http://jsfiddle.net/IrvinDominin/Y79ec/
DEMO
note the changed value
<option value="3">3</option>
$('.num').change(function() {
for (var i=0; i<this.value; i++) {
$('.list').append('<div>' + (i+1) + '</div>');
}
});
Performance-wise it's a bad idea to catch your .list element and create HTML elements
all over again in a loop, so a better approach would be:
var list = '';
$('.num').change(function() {
for (var i=0; i<this.value; i++) {
list += '<div>' + (i+1) + '</div>';
}
$('.list').append( list ); // only once after the loop.
});
try something like this
html code
<select class="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
javascript code
$(document).ready(function(){
$('.num').change(function() {
$('.list').html('');
var num_val = parseInt($(this).val()); // get the number of te elements that will be shown
console.log(num_val);
for (var i =1; i <= num_val; i++) {
$('.list').append('<div>' + i + '</div>');
}
});
});
I have 3 drop-down lists in my form. I want to display the selected value from each dropdown list to my label. The problem is that only one dropbox list will display, while the other two won't.
Here is my code:
<script>
window.onload = function()
{
document.getElementsByName('mydropdown')[0].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
</script>
this is my html
<td><select name="mydropdown" id="mydrop" onchange="">
<option value="none" selected="selected"></option>
<option value="17.50">6M</option>
<option value="25.00">12M</option>
</select>
</td>
<td><label id="mylabel"></label></td>
<td><select name="mydropdown" id="mydrop">
<option value="none" selected="selected">Length </option>
<option value="0.0455">DS516HO</option>
<option value="0.0559">DS520HO</option>
<option value="0.0780">DS516HWR</option>
<option value="0.0200">DS312WH</option>
<option value="0.0624">DS520WH</option>
<option value="0.0361">DS525FH</option>
<option value="0.1170">DS620HW</option>
<option value="0.1340">DS550HW</option>
<option value="0.1340">TD525HW</option>
<option value="0.1820">DS650HW</option>
<option value="0.2340">TD665HWR</option>
</select>
<td><label id="mylabel"></label></td>
You're only binding the zeroth element (the one you selet) with [0]. You need to bind to all of them, possibly like so:
Array.prototype.forEach.call(document.getElementsByName('mydropdown'),
function (elem) {
elem.addEventListener('change', function() {
document.getElementById('mylabel').innerHTML = this.value;
});
});
http://jsfiddle.net/UNLnx/
By the way you are reusing the same ID on multiple elements which is invalid.
Update: Working example: http://jsfiddle.net/x8Rdd/1/
That's because you are only setting the onchange event for the first element in your "mydropdown" group.
<script>
window.onload = function()
{
var dd = document.getElementsByName('mydropdown');
for (var i = 0; i < dd.length; i++) {
dd[i].onchange = function(e)
{
document.getElementById('mylabel').innerHTML = this.value;
};
}
}
</script>
Or something like that. If you're using jQuery then you can set the onchange property for all of them without the loop.
I have 3 select boxes and one input.
I need to merge the selected values together and add it to the hidden input box.
For example:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
</select>
Finally I want to get:
Is this case the value would be:
1-5-2011
How could I get this functionality togehter please?
JSFiddle Demo:
one way to do it is:
HTML:
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
<option value="2-">2</option>
<option value="3-">3</option>
</select>
<select name="select-choice-1" id="select-choice-2">
<option value="5-">5</option>
<option value="6-">6</option>
<option value="7-">7</option>
</select>
<select name="select-choice-1" id="select-choice-3">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
</select>
<input type='hidden' id='myhidden' value='' />
JavaScript:
<script type='text/javascript'>
$(document).ready(function() {
$('select').each(function() {
$(this).change(function() {
var myele = '';
$.each($('select option:selected'), function() {
myele += $(this).val();
});
$('#myhidden').val(myele);
console.log($('#myhidden').val());
});
});
});
</script>
Modified w/ onchange.
If you want the code to be flexible enough to work with an arbitrary number of <select> elements, you can write something like:
$("#yourInputBoxId").val($("[id^=select-choice-]").map(function() {
return $(this).val();
}).get().join(""));
Here, map() will project into an array the selected values of all the <select> elements whose id attributes begin with select-choice-. The array items are then concatenated into a string, without a separator (since the values already contain one).
$( "#id_of_hidden_input" ).val(
$( "#select-choice-1" ).val() +
$( "#select-choice-2" ).val() +
$( "#select-choice-3" ).val()
);
you get always use php by POST or get
change the names
<select name="select-choice-1" id="select-choice-1">
<option value="1-">1</option>
</select>
<select name="select-choice-2" id="select-choice-2">
<option value="5-">5</option>
</select>
<select name="select-choice-3" id="select-choice-3">
<option value="2011">2011</option>
</select>
$choice1 = $_POST['select-choice-1'];
$choice2 = $_POST['select-choice-2'];
$choice3 = $_POST['select-choice-3'];
echo $choice ."-".$choice2 ."-".$choice3;
You'll want to use the selectedIndex and options properties of the select element. Here is a quick example:
var elm1 = document.getElementById("select-choice-1"),
elm2 = document.getElementById("select-choice-2"),
elm3 = document.getElementById("select-choice-3"),
sel1 = elm1.options[elm1.selectedIndex].value,
sel2 = elm2.options[elm2.selectedIndex].value,
sel3 = elm3.options[elm3.selectedIndex].value;
alert( sel1 + sel2 + sel3);
var $selects = $('#select_box_1,#select_box_2,#select_box_3');
var seperator = '-';
$selects.change(function() {
var val = [];
$selects.each(function() {
val.push($(this).val());
});
$('#hidden_input').val(val.join(seperator));
}).trigger('change');
This allows for any number of selectbox values to be concatinated with a seperator of your choice.
The .trigger('change); causes the bound .change(...) event to fire and concatinate the values on page load (just in case the form ha been submitted and the selectboxes prefilled)