$(document).on("change","#groupid3,#groupid2,#groupid1",function(){
alert(this.value);
}
When I doing this , the this.value is proper.
However, if I want to dynamically generate a variable to store the id "#groupid3,#groupid2,#groupid1" as follow,
txt="#groupid3,#groupid2,#groupid1";
$(document).on("change",txt,function(){
alert(this.value);
}
the this.value is undefined.
Can anyone tell me why this is not working?Thanks !
Check again it working.
<div>
<select name="tuanpham" id="groupid1">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
<select name="tuanpham" id="groupid2">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
<select name="tuanpham" id="groupid3">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
</select>
</div>
<script>
txt="#groupid3,#groupid2,#groupid1";
$(document).on("change",txt,function(){
alert(this.value);
});
</script>
Related
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/
I am a novice in JavaScript and jQuery. I provide my HTML code below. I want to make two group of selection in my <SELECT> tags; e.g. Central and Northern. Both <SELECT> tag will have different sub list. For instance, Central will have A, B and C. While Northern will have 1, 2 and 3.
I have do try and error by putting JavaScript code in my HTML as below, unfortunately nothing change and I thing it have problem somewhere. Please help me by correcting my code. TQ
At First Step, user will click whether Central or Northern.
Then system are able to different between Central and Northern. Both should have different list group.
In my case below, it is error somewhere, should be only One dropdown.
My Code as below
<label>Region :</label>
<select class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select onchange="getCentral(this)">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select onchange="getNorthern(this)">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Somthing like this with jquery should do the trick:
In your <head></head> section put this:
<style>
.subCat {
display: none;
}
</style>
And in your <body></body> replace your html for this:
<label>Region :</label>
<select id="selRegion" class="custom-select form-control">
<option value="">Select Region</option>
<option value="central" id="Central">Central</option>
<option value="northern" id="Northern">Northern</option>
</select>
<label>Node Pair :</label>
<select id="selCentral" onchange="getCentral(this)" class="subCat">
<option value="">Select Central</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<select id="selNorthern" onchange="getNorthern(this)" class="subCat">
<option value="">Select Northern</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
$(function() {
$("#selRegion").change(function() {
$(".subCat").hide();
var val = $(this).val();
if(val == "central") {
$("#selCentral").show();
} else if(val == "northern") {
$("#selNorthern").show();
}
});
});
</script>
Hope this helped.
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;
}
});
});
I have these two select tag:
<select>
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
As you can see, my second select have the disabled attribute. I would like in javascript, when I selected the option "car" in my first select, the second select with the car's choice become enabled to make a choice.
How can I proceed in javascript?
JavaScript Version:
document.getElementById("one").onchange = function () {
document.getElementById("two").setAttribute("disabled", "disabled");
if (this.value == 'car')
document.getElementById("two").removeAttribute("disabled");
};
<select id="one">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select disabled id="two">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
jQuery Version:
$('#one').change(function() {
$('#two').prop('disabled', true);
if ($(this).val() == 'car') {
$('#two').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="one">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select id="two" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Put ids on your selects to easily target them
In the handler, by default, disable the second select element
If the current val of the first select is car, then set disabled to false
$('#AutoType').change(function() {
$('#Model').prop('disabled', true);
if ($(this).val() == 'car') {
$('#Model').prop('disabled', false);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select id="AutoType">
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select id="Model" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try this:
<form id="creation" name="creation" onchange="handleSelect()">
<select name="select01" id="select01">>
<option value="car">car</option>
<option value="truck">truck</option>
<option value="moto">moto</option>
<option value="none">none</option>
</select>
<select name="select02" id="select02" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</form>
function handleSelect() {
if (this.value == '01') {
document.getElementById('select02').disabled = true;
} else {
document.getElementById('select02').disabled = false;
}
}
You need to assign an id to you select element like:
<select id="my-input-id" disabled>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
document.getElementById('my-input-id').disabled = false;
Do you want to simply use a frontend framework such as Angular or React.js or Ember?? It's much easier if you want to do something complicated.
A demo is as follows:
http://jsfiddle.net/PxdSP/2244/
All you need to do is include angular.js in your website
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
You can then assign logic to the controller and decide what you want to do with the select or divs.
When you have a multi-select form field such as the following, how do you get, and set the selected option values?
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
</select>
Getting the value(s)
var items = [];
$('select.items option:selected').each(function() {
items.push( this.value );
});
Is this the only way to get the array of values or is there a sleeker way?
Setting the value(s)
var items = ['apple', 'ape', 'carrot'];
$.each(items, function() {
$('select.items option[value="' + this + '"]').prop('selected', true);
});
Is there a sleeker way to do this?
It's quite straight-forward to get the selected values array; use the jQuery .val() method.
var items = $('select.items').val();
//sample result: ["apple","ape","boy","daisy","eagle"]
Please note that JavaScripts value property, which works well for other form fields, returns just the first selected value
function out( v ) {
$('pre.out').text( JSON.stringify( v ) );
}
$('select.items').on('change', function() {
out( $(this).val() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<pre class="out"></pre>
To set the selected values also requires no looping. Use the same jQuery .val() method.
$('select.items').val( ['apple','ape','boy','age','eagle'] );
$('button.set').on('click', function() {
$('select.items').val( ['apple','ape','boy','age','eagle'] );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="items" multiple="multiple" size="5">
<option value="apple">apple</option>
<option value="ant">ant</option>
<option value="ape">ape</option>
<option value="age">age</option>
<option value="boy">boy</option>
<option value="banana">banana</option>
<option value="carrot">carrot</option>
<option value="cat">cat</option>
<option value="daisy">daisy</option>
<option value="desk">desk</option>
<option value="elephant">elephant</option>
<option value="eagle">eagle</option>
<option value="fox">fox</option>
<option value="fat">fat</option>
<option value="goat">goat</option>
<option value="good">good</option>
<option value="gum">gum</option>
<option value="hut">hut</option>
<option value="hop">hop</option>
<option value="insect">insect</option>
<option value="ice">ice</option>
<option value="jump">jump</option>
<option value="kite">kite</option>
<option value="lamp">lamp</option>
<option value="lap">lap</option>
<option value="monkey">monkey</option>
<option value="mat">mat</option>
<option value="nature">nature</option>
<option value="nose">nose</option>
<option value="owl">owl</option>
<option value="pocket">pocket</option>
<option value="pick">pick</option>
<option value="quote">quote</option>
<option value="rabbit">rabbit</option>
<option value="run">run</option>
<option value="soft">soft</option>
<option value="sit">sit</option>
<option value="table">table</option>
<option value="toy">toy</option>
<option value="understand">understand</option>
<option value="vote">vote</option>
<option value="winter">winter</option>
<option value="xmas">xmas</option>
<option value="yes">yes</option>
<option value="zoo">zoo</option>
</select>
<button class="set">SET</button>