Clone div using Javascript and change inner DOM elements ID

Clone div using Javascript and change inner DOM elements ID - javascript

I've a two static div tags, inside that I have one select tag and one text box with different ID's. So when I clone the tag, it just adds the same div tag to the DOM, but how can I change the inner DOM elements tag?
Here is my code
<div id="masterGrade" style="border-style: solid; width: 200px">
<select id="selectGrade1">
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" id="text1"/>
</div>
<div style="border-style: solid;width: 200px">
<select id="selectGrade2">
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" id="text2"/>
</div>
My JS code
$scope.addGrade = function() {
var div = document.getElementById('masterGrade'),
clone = div.cloneNode(true);
clone.id = "some_id";
document.body.appendChild(clone);
}
Any ideas would be greatly appreciated.

Mixing DOM api with angular is not a best practice. You must do it angular way(ng-repeat)
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.grades = [{}];
$scope.addGrade = function() {
$scope.grades.push({});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<button ng-click='addGrade()'>Add</button>
<div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
<select ng-model='grade.list'>
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<input type="text" ng-model='grade.text' />
</div>
{{grades}}
</div>
Fiddle Demo
Edit: To deal with the index, use $index, The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.grades = [{}];
$scope.addGrade = function() {
$scope.grades.push({});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<button ng-click='addGrade()'>Add</button>
<div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
<label for="select{{$index}}">Grade {{$index}}:</label>
<select id='select{{$index}}' ng-model='grade.list'>
<option value="grade1">Grade 1</option>
<option value="grade2">Grade 2</option>
<option value="grade3">Grade 3</option>
<option value="grade4">Grade 4</option>
</select>
<br>
<label for="text{{$index}}">Text{{$index}}:</label>
<input id='text{{$index}}' type="text" ng-model='grade.text' size='10' />
</div>
{{grades}}
</div>
Fiddle Demo

Related

selectize.js: Fetch all selected values from selectized dropdown

I have multiple select options have different classes and names and I am using selectize library to allow the user to search. I want to get the selected values on click of a button. Right now, I have tried the following code
$(window).bind("load", function()
{
var selectize_search_1 = $('.selectize_search_1').selectize(
{
sortField: 'text'
});
});
function fetch_cars()
{
var cars_value = $('.selectize_search_1')[0].selectize.items;
alert (cars_value);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>
So, lets suppose i select car 1 and car 2 from the dropdowns, but using the above code, it only return me the selected value in the first dropdown but not both selected values.

This should do it:
$(function(){
var selectize_search_1 = $('.selectize_search_1').selectize({sortField: 'text'});
});
function fetch_cars(){
var cars_value = $('select.selectize_search_1').get().map(el=>el.value).join(",");
console.log(cars_value);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>
If you want the values of all select boxes you will need to .map() over them.
The jQueryObject.get() will extract the element selection from the jQuery object, so the following .map() is a plain ("Vanilla") Array.prototype.map() again.

My solution. Create unique <select> class.
I added a working version. Has two unique <select> classes now, with the corresponding jQuery.
$(window).bind("load", function() {
var selectize_search_1 = $('.selectize_search_1').selectize({
sortField: 'text'
});
//create new selectize...
//create new selectize...
var selectize_search_2 = $('.selectize_search_2').selectize({
sortField: 'text'
});
});
function fetch_cars() {
var cars_value = $('.selectize_search_1')[0].selectize.items;
//make another var...
//make another var...
var cars_value2 = $('.selectize_search_2')[0].selectize.items;
//retrieve new selectize...
//retrieve new selectize...
alert("select1: "+cars_value + " select2: " + cars_value2);
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
<select class="selectize_search_1" name="cars[]" required>
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<br />
<!-- add new class -->
<!-- add new class -->
<select class="selectize_search_2" name="cars[]" required>
<!-- add new class -->
<!-- add new class -->
<option value="">Select Car</option>
<option value="C1">Car 1</option>
<option value="C2">Car 2</option>
<option value="C3">Car 3</option>
</select>
<hr />
<button type="button" onclick="fetch_cars();">Fetch Cars</button>

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

Find out which element was clicked from the list of elements

I have a few divs that share the same class.
I have a dropdown that changes the background color of one of those divs when selected(option 2 changes div #2).
My question is how can I change the dropdown option when clicking a certain div?
I have the logic behind changing the actual option and the div clicks, but I can't figure out how to find exactly which of the divs was clicked(the divs are dynamically created, so they don't have Ids, only class names).
Is there any way to check what div was clicked relatively to the entire list of divs with the same class?
Thanks.
Example code:
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>
<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>
Edit:
What I have:
The select can change the color of a div depending on choice.
Clicking a div changes it's own color.
What I need:
Clicking a div also changes the option in the select.
I hope it's a bit clearer now

With jQuery You can get the index of the clicked div by using .index()
$('div.collection').click(function () {
var index = $('div.collection').index($(this));
console.log(index);
$('select').val(index + 1);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>

You can use jQuery for this, It's very simple:
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="4">third div..</option>
</select>
<div class="collection">Div1</div>
<div class="collection">Div2</div>
<div class="collection">Div3</div>
<div class="collection">Div4</div>
jQuery:
$('div.collection').click(function(){
var index = $('div.collection').index($(this)) + 1;
$('select').val(index);
});
Example: http://codepen.io/ilanus/pen/zBgvJr

Wrap the div around a parent div and use index() to get the position of div
$('.collection').click(function(){
var position = $(this).index()+1;
console.log(position);
$('.size').val(position);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="size form-control" id="size" name="size">
<option value="1">first div</option>
<option value="2">second div</option>
<option value="3">third div..</option>
<option value="4">Fourth div..</option>
</select>
<div>
<div class="collection">random</div>
<div class="collection">text</div>
<div class="collection">inside</div>
<div class="collection">here</div>
</div>

You can follow this Pen .
<div id='parentDiv'>
<div class="clickMe">1</div>
<div class="clickMe">2</div>
<div class="clickMe">3</div>
<div class="clickMe">4</div>
</div>
<select name="dropDown">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<style>
.clickMe{
clear:both;
width:20px;
height:20px;
border:1px solid black;
margin: 20px;
}
</style>
<script>
$('#parentDiv').on('click','.clickMe',function(){
console.log($(this).index());
var index= $(this).index();
$('select[name=dropDown] option:eq('+index+')').attr('selected', 'selected');
});
</script>
Thanks. Please tell if it works fine.

Action when clicking on an option in a select menu

I am programming a website with a map and a side panel, where I want some action to happend I chose an option in a select-menu.
This is my code:
<select id="optionList" onchange="display_div(document.getElementById('optionList').value);">
<option selected="selected">Chose league</option>
<option value="PL">Premier League</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div2(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id="MUN" style="display:none" onclick="clickOnMUN()"> .... </div>
</div>
where I have a script with what happens when you choose Manchester United from the menu (it is plotting some popups in the map):
function clickOnMUN() {
var info = whichteam("MU"); // Finner ut hvilket lag som spiller, og info om stadion
var marker = L.marker([info.substring(0, 5), info.substring(5, 10)]).addTo(map);
marker.bindPopup(info.substring(10));
}
This code is oddly not doing the script when I chose an option in the team-list.
The display_div-functions are only showing the options.

The only issue I see is the second "display_div" call... it says "display_div2" maybe a typo... but if it is the same as the first and only show the hidden div, removing the 2 should solve part of the problem. Also it could improve the code if you use some listeners for the clicks events instead of placing the function call inside the html tag. But this could be a version of your current code:
function display_div( theDiv ) {
console.log ( theDiv );
$('#'+theDiv).css("display", "block" );
}
function clickOnTeamList(targ) {
$('#status').html("clicked a team " + targ );
}
p {
font-family: verdana;
font-size:12px;
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="optionList" onchange="display_div(document.getElementById('optionList').value)">
<option selected="selected">Chose league </option>
<option value="PL">Premier League • only option active</option>
<option value="CH">Championship</option>
<option value="L1">League 1</option>
<option value="L2">League 2</option>
</select>
<p></p>
<div id="PL" style="display:none;">
<select id="plTeamList" onchange="display_div(document.getElementById('plTeamList').value);">
<option selected="selected">Chose team</option>
<option value="MUN">Manchester United</option>
<option value="CHE">Chelsea</option>
<option value="BOU">Bournemouth</option>
<option value="NEW">Newcastle</option>
</select>
<div id = "MUN" style="display:none" onclick="clickOnTeamList(' Manchester United')" ><p>Team: Manchester United</p></div>
<div id = "CHE" style="display:none" onclick="clickOnTeamList('Chelsea')" ><p>Team: Chelsea</p></div>
<div id = "BOU" style="display:none" onclick="clickOnTeamList('Bournemouth')" ><p>Team: Bournemouth</p></div>
<div id = "NEW" style="display:none" onclick="clickOnTeamList('Newcastle')" ><p>Team: Newcastle</p></div>
</div>
<div id="status">___</div>

How to get Value of multiple select options with same class and name

I am trying to get the value of the selected option. However, there are 2 different select menus, using the same name and class. I want to be able to pull the text inside the value.
I already know which select option they choose, but I can't seem to get the value of the option.
This is the HTML
<div id="single_course" style="display: none;">
<SELECT class="form-control" name="course_choice">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
<div id="2day_course" style="display: none;">
<SELECT class="form-control" name="course_choice">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
This the JS Code
var course_choice = $('#register select[name=course_choice]').value;
Your advice is greatly appreciated!!

First of all, you cannot get the values of both. So, you can get it as an array. You can do like this:
<div id="single_course" style="display: none;">
<SELECT class="form-control" name="course_choice[]">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
<div id="2day_course" style="display: none;">
<SELECT class="form-control" name="course_choice[]">
<OPTION value="1">Value 1</OPTION>
<OPTION value="2">Value 2</OPTION>
<OPTION value="3">Value 3</OPTION>
</SELECT>
</div>
Or, if you cannot change the HTML, then you can do this way suggested by sjkm:
var course_choices = $('select[name="course_choice"]');
var course_choice[0] = course_choices.eq(0).val();
var course_choice[1] = course_choices.eq(1).val();

var course_choices = $('select[name="course_choice"]');
var course_choice1 = course_choices.eq(0).val();
var course_choice2 = course_choices.eq(1).val();

Try this:
// array of selected options (array items are dom objects)
var course_choice = $('#register select[name=course_choice] option:selected');
// extract option's value with jquery
console.log( $(course_choice[0]).val() );
console.log( $(course_choice[1]).val() );
// ... or without query
console.log( course_choice[0].value );
console.log( course_choice[1].value );

working fine for me :
<SELECT class="form-control select_addon" name="course_choice[]">
var mang_addon_cart = [];
var course_choice = $('.select_addon option:selected');
for(var i = 0; i < course_choice.length; i++){
var val_addon = course_choice.eq(i).val();
var name_addon = course_choice.eq(i).data('name');
mang_addon_cart.push({
giatri : val_addon,
name : name_addon
});
}
console.log(mang_addon_cart);

Develop Reference

JavaScript is the programming language of the Web.

Clone div using Javascript and change inner DOM elements ID - javascript

Related

selectize.js: Fetch all selected values from selectized dropdown

Connecting two Combo-boxes with html and js

Find out which element was clicked from the list of elements

Action when clicking on an option in a select menu

How to get Value of multiple select options with same class and name

Categories

Resources