How to copy option element after a specific option value element - javascript

How can I copy the select option element after a specific option value in JavaScript/jQuery?
Here's my two selects
First select where I want to copy the option below the copy value
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Second select where I want to append what I copy on first element
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
</select>

You can target the option element with attribute equal selector, along with .nextAll(), .clone() and .appendTo() to create clone of option element and append in second select dropdown
$('option[value=copy]').nextAll().clone().appendTo('.select2');
$(function(){
$('option[value=copy]').nextAll().clone().appendTo('.select2');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select2">
</select>

First select the first element to copy :
let $copyElement = $('#firstSelect option[value="copy"]').next();
Then, while elements are available, clone them and append them to the second select:
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
let $copyElement = $('#firstSelect option[value="copy"]').next();
while($copyElement.length > 0) {
$('#secondSelect').append( $copyElement.clone() );
$copyElement = $copyElement.next();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select" id="firstSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select" id="secondSelect">
<option value="1">1</option>
<option value="2">2</option>
</select>

Consider the following example.
$(function() {
function copyOpts(a, b) {
if ($("option:selected", a).val() == "copy") {
$("option:selected", a).nextAll().clone().appendTo(b);
}
}
$(".primary").change(function() {
copyOpts($(".primary"), $(".secondary"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select primary">
<option value="1">1</option>
<option value="2">2</option>
<option value="copy">Copy below</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class="select secondary">
<option value="1">1</option>
<option value="2">2</option>
</select>
You can move the if() statement to either the change callback, or leave it in the function.
See more:
https://api.jquery.com/nextAll/
https://api.jquery.com/clone/
https://api.jquery.com/appendTo/

Related

jquery confused same class to option in select

i want to be disabled duplicate options in my dropdown but my jquery are confuse.
var map = {};
$('select.ex option').addClass(function () {
if (map[this.value]) {
$(this).prop('disabled',true)
}
map[this.value] = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>
I necessary to write same class name. it's possible to edit my code to disabled duplicate options?
You can use .each loop to iterate through your select then loop through option inside selects and if the value already exist inside {} remove them else mark it as true.
Demo Code :
//loop through select
$('select.ex').each(function() {
var map = {}; //define this
//loop through options
$(this).find("option").each(function() {
if (map[this.value]) {
$(this).prop('disabled', true)
} else {
map[this.value] = true;
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select class='ex'>
<option value="1">1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="4">4</option>
</select>

Disabling Second Drop Down Menu Options Based on First Drop Down Menu Options

I need to disable the options in the Aspired drop-down menu.
E.g User chose 3 for "Current" and the option 1 and 2 will be disabled for Aspired. If the user chose 4 in "Current" then option 1, 2 and 3 will be disabled and so on and so forth. I need help in creating logic using JavaScript.
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
This might help you with your logic. Remember it's an ES6 way.
Pure Js ES6 Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
const listArray = Array.from(options);
listArray.forEach(item => {
if (item.value < document.getElementById("current").value) {
item.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
The backward compatible version (IE9+) Version
function onCurrentChange() {
const options = document.getElementById("aspired").options;
Array.prototype.forEach.call(options, function(child, index) {
if (child.value < document.getElementById("current").value) {
child.disabled = true;
}
});
}
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
Jquery Version
function onCurrentChange() {
$("#aspired option").each(function() {
if ($(this).val() < $("#current").val()) {
$(this).attr("disabled", true);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Current:</label>
<select name="Current" id="current" onchange="onCurrentChange()">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired" id="aspired">
<option value="select">Select</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>
Not ready to write any code now, but you can use JavaScript to get the value of the "current" select after it has been selected, to do that you can add a click event listener for the options.
To get the value, check out this thread Get selected value in dropdown list using JavaScript?
From there, use it to automatically populate the options for the aspired select element, using conditions based on the first value...
This might help for the last step Adding options to select with javascript
function disFun(){
var Aspired = document.getElementById("Aspired").options;
var Current = document.getElementById("Current").value;
for (var i=1; i < +Current; i++) {
Aspired[i].disabled = true;
}
}
<label>Current:</label>
<select id="Current" name="Current" onchange="disFun()">
<option value="select">Select</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>
<label>Aspired:</label>
<select id="Aspired" name="Aspired">
<option value="select">Select</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>
If you can use Jquery. You need to select the value chosen say n from Current select. Then loop until that value from 1 to n in the Aspired select and add 'disabled attribute' as true
<label>Current:</label>
<select name="Current">
<option value="select">Select</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>
<label>Aspired:</label>
<select name="Aspired">
<option value="select">Select</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>
$(document).ready(function(){
$("select[name='Current']").change(function(){
$("select[name='Aspired']").children("option").attr('disabled', false) // makes all options to selectable in case of new selection in Current select
for (i = 0; i < $(this).children("option:selected").val(); i++) {
$("select[name='Aspired']").children('option[value='+ i +']').attr('disabled', true) // disabling all the values uptil the select value
}
});
});

how to return false if two div have the same value when submit the form

I have a form has a lot of selects inside divs so i want when the user submits the form if there are two div or more have the
same value, form example the first has this value : 1 one and the third has
the same value so don't submit and return false, so is there any way javascript or jquery can help me to do that?
$("form").submit(function() {
alert("2 div or more have the same value, please change them");
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<div>
<select class="number">
<option value="">select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="letter">
<option value="">select</option>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</div>
<input type="submit"/>
</form>
You can try this javascript code keeping your html
$("form").submit(function(event)
{
var selects = $('select');
selects.each(function(i,select1){
var found = false;
selects.each(function(j,select2){
if(i!=j && select1.value == select2.value){
alert("2 div or more have the same value, please change them");
found = true;
event.preventDefault();
return false;
}
});
if(found){
return false;
}
});
});

Multiple select, disable option

for disable option im using this:
function handleSelection(source, dest) {
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
<select id="s1" onchange="handleSelection(this, s2)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="s2" onchange="handleSelection(this, s1)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
but this job only with 2 select. I need then this job with multiple select.
Thanks!
I am not sure what you trying to do and if you approach is good but try my code. it will work
function handleSelection(source, destArr) {
for( dest in destArr){}
itemRemove = dest.length - source.selectedIndex;
for(i=dest.length-1; i>=itemRemove; i--){
dest.options[i].disabled = true;
}
}
}
<select id="s1" onchange="handleSelection(this, [s2,s3,s5])">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="s2" onchange="handleSelection(this, [s6,s7,s8])">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
in my script, selecting for example 2 in the first select, in the second clear the 4 and 3, and then remains the 1 and 2. (4 - 2 = 2). It works well, but now I can do the same job with the most select

Forcing multiple selects (dropdowns) to have unique values

On my page, there are select dropdown which need to be validated in certain way before I submit the page.
Here is how those selects looks like:-
HTML
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Rules:-
What I want is as follows:-
All the selects would be defaulted to Blank Value (-1)
Value of 1, 2 and 3 will be uniquely selected for all selects. This means that there would be only one select with a value of "1", only one select with a value of "2" and only one select with a value of "3".
All the remaining should have the value of "0".
What I did is below in JS. It's basically not much helpful :-(
JS
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
if (count_selects >=5 ) {
alert(count_selects + "is >=5");
}
else {
alert(count_selects + "is <5");
}
e.preventDefault();
});
My JsFiddle is
JSFiddle Link
If i clearly understood your problem, here is solution:
Add attribute selected="selected" to each tag "option" with value="-1".
Here is JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var uniqueVals = [1,2,3];
var selectedVals = [];
var inputs = $(".select_style");
inputs.each(function(){
if(this.value == -1){
this.value = 0;
}
var intVal = parseInt(this.value)
if(uniqueVals.indexOf(intVal) != -1){
if(selectedVals.indexOf(intVal) != -1){
alert('validation is not passed');
return 0;
}else{
selectedVals.push(intVal);
}
}
});
e.preventDefault();
});
});
Fiddle: http://jsfiddle.net/weeklyTea/L9JEK/
This is a bit dirty, but i think is what you want:
HTML:
<form method="post" class="my-form" id="form-1" action="">
<select name="first_select_0" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_1" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_2" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_3" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_4" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_5" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="first_select_6" class="select_style">
<option value="-1"></option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="submit" name="submit" id="submit-selection" value="Submit" class="submit-button btn btn-lg btn-primary" />
</form>
JS:
$(document).ready(function(){
$("#submit-selection").click(function(e){
var count_selects = $(".select_style").length;
var correct = true;
if($(".select_style option[value='1']:selected").length != 1){ correct = false; }
if($(".select_style option[value='2']:selected").length != 1){ correct = false; }
if($(".select_style option[value='3']:selected").length != 1){ correct = false; }
if($(".select_style option[value='0']:selected").length != count_selects-3){ correct = false; }
alert(correct);
e.preventDefault();
});
});
FIDDLE:
http://jsfiddle.net/frikinside/8wcp6/4/

Categories