jQuery append list of x elements - javascript

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>');
}
});
});

Related

Clicking on the first option js

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.

how to preserve all select elements selected values in jquery

Can you help me to solve this problem.
The problem is this.
I have multiple select lists with same class name but different ids. If user select same option which is already selected in other select list then there should be an alert. and after alert the current select list which is clicked or changed should be restore to the previous value. for example we have 3 select boxes name as A1, A2, A3. Each one have same values for example 1,2,3,4. A1 selected value is 1, A2 selected value is 2 and A3 selected value is 3. Now if your want to change A1 value from 1 to 2 then there should be an alert like "Already selected". After this alert A1 list should be restored back to its original value which is 1. I tried the following code. In this code I can get already existing alert but the value of the last changes select box is changed to new one.
$(document).ready(function(){
var init = true;
if(init == true){
var a = new Array();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
a[current_obj_id] = current_obj_value;
});
init = false;
}
$(".brand-list").change(function(){
a[$(this).attr('id')] = $('#'+ $(this).attr('id') + " option:selected").val();
var current_selected_obj_id = $(this).attr('id');
var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
if(current_obj_id != current_selected_obj_id){
if(current_selected_obj_value == current_obj_value){
alert("current element global value: "+ a[current_selected_obj_id]);
$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')
alert("already selected");
}
}else{
a[current_obj_id] = current_obj_value;
}
});
});
$( ".brand-list" ).focus(function() {
var current_selected_obj_id = $(this).attr('id');
var current_selected_obj_value = $('#'+ $(this).attr('id') + " option:selected").val();
a[current_selected_obj_id] = current_selected_obj_value;
console.log(a[current_selected_obj_id]);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>
Hopefully you can understand my question, because I'm not get to ask question which community members can understand easily. Thanks
You can save the previous value and check it then
$(document).ready(function(){
var init = true;
if(init == true){
var a = new Array();
$(".brand-list").each(function(i, obj){
var current_obj_id = $(this).attr('id');
var current_obj_value = $('#'+ current_obj_id + " option:selected").val();
a[current_obj_id] = current_obj_value;
});
init = false;
}
function hasConflict(input){
var conflict = false;
$(".brand-list").not(input).each(function(i, obj){
if($(this).val()==input.val()){
conflict = true;
return false; //break the loop
}
});
return conflict;
}
$(".brand-list").change(function(){
var $this = $(this); //recycle object
if(hasConflict($this)){
$this.val($this.data('prev'));
alert("Conflict"); //do whatever
}
});
$( ".brand-list" ).on('click focus',function() {
$(this).data('prev',$(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
</select>
Rather than annoy user by letting them select something and be told they can't it's better UX to either disable previous selections or remove them completely.
Here's an approach that manages the filtering/removing of other selections
var $selects = $(".brand-list"),
// store a cloned set of all options
$storedOptions = $selects.first().children().clone().removeAttr('selected'),
// whether to always include "SELECT A BRAND"
alwaysShowDefault = true;
$selects.change(function() {
// create array of all the selected values
var allValues = $selects.map(function() {
return $(this).val()
}).get();
// loop through each select to create filtered options
$selects.each(function(i) {
// new set of cloned and filtered options for this select instance
var $opts = $storedOptions.clone().filter(function() {
if(+this.value === -1){
return alwaysShowDefault || +allValues[i] === -1;
}
return allValues[i] === this.value || allValues.indexOf(this.value) === -1;
});
// update filtered options and reset current value
$(this).html($opts).val(allValues[i])
})
// trigger one change on page load to filter what is already selected
}).first().change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="inputBrand-1" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-2" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="inputBrand-3" class="brand-list">
<option value="-1">SELECT A BRAND</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" >3</option>
<option value="4">4</option>
</select>
Actually you'r currently doing is manually setting the selected attribute on each option element. It is not a good approach because it doesn't remove other attributes of options of the same select element. So use following code in your source.
$(e.currentTarget).val(-1);
Replace following code with above one
$('#'+ current_selected_obj_id + " option[value=" + a[current_selected_obj_id] +"]").attr('selected','selected')

Note able to set count on dropdown change

I have 3 dropdown with values N/A, 3, 5, 6. On change event if I change value of first drop down the count should be 1 always but whenever I change again value is keep increasing. I know my counter is wrong but not getting idea to fix it.
$count = 0;
$maxcount = 3;
$arrOfLevel2ElementId.each(function () {
arrOfLevel2ElementId = $(this).attr('id');
$("#" + arrOfLevel2ElementId).on('change', function () {
level2ElementVal = $(this).val();
if (level2ElementVal == "N/A") {
if ($count > 0) {
$count--;
} else {
$count;
}
showOutput($sum);
return false;
} else {
if ($count <= $maxcount) {
$count++;
} else {
$count;
}
alert($count);
$sum = parseInt(level2ElementVal);
showOutput($sum);
}
This is the case because as soon as you change the dropdown, you call the function.
Here you state that if(level2ElementVal == "N/A") you decrease the count.
But in the else statement, meaning you select either 3, 5 or 6, you check if the count isn't at the maxcount. Which is not the case if $count = 1. Then you increase it. Which explains that it increases when you change the value.
I'm not sure why you have a $maxcount, but if you were to change it to 1, my assumption is that your count should not exceed 1.
EDIT:
If what I've understand correctly from your comments you want to device the three numbers, unless its on N/A.
Try this fiddle:
https://jsfiddle.net/7b21b699/1/
It sets the value field when the last field is changed and checks the values at that point. Then sums them up when needed and divides them correctly.
$("#box3").on('change', function(){
var val1 = $("#box1").val();
var val2 = $("#box2").val();
var val3 = $("#box3").val();
var sum = 0;
var count = 0;
if(val1 != "N/A"){
sum += parseInt(val1);
count++;
}
if(val2 != "N/A"){
sum += parseInt(val2);
count++;
}
if(val3 != "N/A"){
sum += parseInt(val3);
count++;
}
var result = sum / count;
$("#value").text(result);
});
<select class="form-control" id="box1" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<select class="form-control" id="box2" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<select class="form-control" id="box3" name="a">
<option value="" selected="selected">Select a value</option>
<option value="N/A">N/A</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="10">10</option>
</select>
<div id ="value">value comes here</div>

Create div based on selected drop down value

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

jQuery/ Javascript change select options based on selected answer

I have the following code:
<table>
<tr><td>Item</td><td>Ranking</td></tr>
<tr><td>Apples</td><td><select id="apple" name="apple">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
<tr><td>Oranges</td><td><select id="oranges" name="oranges">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
<tr><td>Bananas</td><td><select id="bananas" name="bananas">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
<tr><td>Lemons</td><td><select id="lemons" name="lemons">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
<tr><td>Limes</td><td><select id="limes" name="limes">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
<tr><td>Kiwi</td><td><select id="kiwi" name="kiwi">
<option value="#" selected="selected">Rank...</option>
<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></td></tr>
And here in jsFiddle: http://jsfiddle.net/XNYU2/
I'm trying to understand if this is possible and, if so, whether jQuery or Javascript is the best solution and how I'd go about making it happen.
It's a ranking system and what I need to happen is simple. If a user selects from any dropdown any value, that value needs to be removed from the other dropdowns. Conversely, if the user then unselects that value, it needs to return to all the dropdowns.
Try this:
$(function() {
$('select').on('change', function(event){ // This binds listeners to the change event on all the select elements
var sId = this.id; // store off the changed element id
var vId = this.value; // store off the changed element value
$('select').each( function(){ // this loops across the same set of elements
if(this.id != sId && this.value == vId) { // If it is not the triggering element and the value is the same, do something
this.options.selectedIndex = 0; // reset the value to 'rank'
}
});
});
});
You can do this in either jQuery or pure js, but jQuery selectors sure make it easy to loop through the elements and apply actions on change with very little code.
Upon re-reading you question, this accomplishes the same thing but slightly differently; the user is forced to have only 1 set of ordered ranking with no overlap, but we don't have to go to the trouble of removing/adding options.
Yes, this is a task for JavaScript. jQuery isn't an alternative to JavaScript but basically a toolset on top of it that makes manipulation of browser elements easier. I recommend using it, even though you'll need to understand JavaScript basics in order to use it effectively.
The key here is to decompose your problem; one is to perform an action once a Select has been changed. See here how this is done: http://api.jquery.com/change/
The second action is to actually implement the change, which is described e.g. here
Removing an item from a select box
The jsFiddle is here and that's the code:
var SelectOptions = ['Rank...', 1, 2, 3, 4, 5];
$(document).ready(function () {
$('#TheTable').find('select').change(function () {
var TheSelectedValue = parseInt($(this).val(), 10);
var TheSelectID = $(this).prop('id');
var TheHTML = "";
for (var i = 0; i < SelectOptions.length; i++) {
if (SelectOptions[i] !== TheSelectedValue) {
TheHTML = TheHTML + '<option value="';
TheHTML = (i === 0) ? TheHTML + '#' : TheHTML + SelectOptions[i];
TheHTML = TheHTML + '">' + SelectOptions[i] + '</option>';
}
}
$('#TheTable').find('select').each(function () {
if ($(this).prop('id') !== TheSelectID) {
$(this).html(TheHTML);
}
});
});
});
That's just one way to do it: I put it together in a few minutes and I'm sure it can be improved but that should get you started.

Categories