How to have a hyphen between two values?
This is my code:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').text();
$('input').val(var_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
This is the result I received:
This is what I want:
How to have a hyphen between two values?
Any help is appreciated.
You can use "id" in html:
<div>
<select id="alphabet">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="id">
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
</div>
jQuery(document).ready(function($) {
$('input').val('default');
$('#id').change(function() {
const id = $('#id :selected').text();
const alphabet = $('#alphabet :selected').text();
$('input').val(alphabet + "-" + id);
});
});
This is how I would modify your code, it gives you the expected results regardless of the content of the selected option text:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = [];
$(':selected').each(function(index, item){
var_id.push(item.innerText)
});
$('input').val(var_id.join(' - '));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
Here's one way to do it:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').text();
$('input').val(var_id[0] + ' - ' + var_id[1]);
});
});
Also, if you want to use an ES6 template literal, you can use:
$('input').val(`${var_id[0]} - ${var_id[1]}`);
When any select menu changes, you could push each select value and join with the hyphen delimiter.
$(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
let values = [];
$('select').each(function () {
values.push(this.value);
});
$('input').val(values.join('-'))
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<input type="text" value="">
Instead of applying text directly to the array of elements returned by $(':selected') you can map each element to their text representation and then join the array of the text-values:
jQuery(document).ready(function($) {
$('input').val('default');
$('select').change(function() {
var var_id = $(':selected').map(function () {
return $(this).text()
}).toArray().join("-");
$('input').val(var_id);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select>
<option value="1">1</option>
<option value="2">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="text" value="">
Related
i want to select values from select drop down list and print them in <div
like if i select 0 and prints 0 automatically
like values are 0 4 5
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"><!--345 --></div>
You can do it by using jquery's change event and append values on your div when changing options in this way.
$('select').on('change', function (e) {
var txt = $(this).val();
$('#show_values').append(txt+" ");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<select>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div id="show_values"></div>
I'm trying to add some functiolality with jQuery to an HTML page but I'm having some troubles with accessing the DOM.
By now,I'm accessing to the DOM elements by 'id' that's because I think is the easiest way to do it but it has a problem. For a unique elemet it's ok but what if I have 2 or more equal elements? Id's supposed to be unique so I need a way diferent to do it.
I have some code which partially does what I need, but as I mentioned before, it only works with "one element", I need to do the same but with 2 or more "equal elements". So let me show you my code so far.
<div style="background-color: indigo;">Input
<select class="" name="" id="ana_dig">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;">
<option value="" selected disabled>Choose</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
$(function() {
$('#ana_dig').change(function() {
$('.input').hide();
$('#' + $(this).val()).show();
});
});
As you can see, I have a 'div' which has 3 'select' and depending on what option is selected in the first 'select' it shows you the second or de third 'select'. Pretty easy but if copy and paste de 'div' the second 'div' does not work as the first. What sould I do if I want to 2, 3 or more 'div' work like the first one? Any suggestions?
Use classes instead.
NOTICE CHANGES NO MORE IDS, CLASS ADDED TO INPUTS YOU CAN HAVE MULTIPLE CLASSES SEPERATED BY SPACE
<div style="background-color: indigo;">Input
<select class="someclass" name="">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input dig" style="display:none;">
<option value="" selected disabled>Choose</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input ana" style="display:none;">
<option value="" selected disabled>Choose</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
And then do this instead: SEE THE CHANGE HERE ALSO
$(function() {
$('.someclass').change(function() {
$('.input').hide();
$('.' + $(this).val()).show(); // dot is looking for class # is looking for id
});
});
I've used data attributes as an additional selector.
First we find the parent element enclosing our group of select elements. We then use jQuery toggle() function to hide and show. We can then hide and show using the data attributes.
NOTE the id's are unique in the duplicated div which is fine. The jQuery below has no dependence on IDs
$("[data-input=type]").on("change", function(){
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="background-color: indigo;" class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div style="background-color: blue;" class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
With just a little bit of effort we can extend this into dynamically added content. We just need to add one more containing element around the form.
//Event handler is now attatched to [data-input=type] inside
//formGroup, including any that are dynamically added
$("#formGroup").on("change", "[data-input=type]", function() {
//Find the parent that encloses our selects
var $parent = $(this).closest(".inputGroup");
var selValue = $(this).val();
//Show and hide using toggle()
//$($parent).find("[data-input=ana]").toggle(selValue === "ana");
//$($parent).find("[data-input=dig]").toggle(selValue === "dig");
//Don't hide the "type" element - hide the other selects
$($parent).find("[data-input]").not(this).hide();
//Show the one with the matching data attribute
$($parent).find("[data-input= " + selValue + "]").show();
});
//Code to add new row
$("#addRow").on("click", function(){
//Clone first row
var rowClone = $(".inputGroup").eq(0).clone(true);
var rowCount = $(".inputGroup").length;
//Change the ids of the nested select elements
rowClone.find("select").each(function(){
$(this).attr("id", $(this).attr("id") + rowCount);
});
//Append the row
$("#formGroup").append(rowClone);
});
.inputGroup:nth-child(even) {
background-color:#CCC;
}
.inputGroup {
padding:5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="formGroup">
<div class="inputGroup">Input
<select class="" name="" id="ana_dig" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
<div class="inputGroup">Input
<select class="" name="" id="ana_dig2" data-input="type">
<option value="" selected disabled>Choose</option>
<option value="ana">Analogic</option>
<option value="dig">Digital</option>
</select>
<select class="input" id="dig2" style="display:none;" data-input="dig">
<option value="" selected disabled>Choose Digital</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>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
</select>
<select class="input" style="display:none;" id="ana2" data-input="ana">
<option value="" selected disabled>Choose Analog</option>
<option value="0">A0</option>
<option value="1">A1</option>
<option value="2">A2</option>
<option value="3">A3</option>
<option value="4">A4</option>
<option value="5">A5</option>
</select>
</div>
</div>
<input type="button" value="Add Another Row" id="addRow"/>
Ok, this hides both the digital, and analog submenus, until it is selected by the first selection:
<script>
$(document).ready(function(){
$("select").hide();
$("#ana_dig").show();
$("#ana_dig").click(function(){
var x="#" + $(this).val();
$("select").hide();
$("#ana_dig").show();
$(x).show();
});
});
</script>
the op said if they wanted to add more in the first pull down selection, you would just add your additional option element with the value equal to the id to show. I added a reset function so when the first selection is changed, it resets... expanding it only is in the html code too.... I like to use ID for forms, and classes just for styling, and tag names for styling on page events
Been trying for hours but cannot get it right how can i check if an option is already selected in another select. Where am creating my form rows dynamically with the same class for all the newly created select.
below is how my form is after being created dynamically.
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
what i want to achieve is to make sure the data submitted does not have duplicates. My issue is to find out if an option is already selected in a previous select below is the js i have tried but haven't achieved anything with it.
$(".tank_id").on('change', function(){
var inputs = $('.tank_id');
var result = inputs.filter(function(i,el){
return inputs.not(this).filter(function() {
return this.value === el.value;
});
});
if (result.length > 0) {
alert('match found')
}
});
Try this
$(".tank_id").on('change', function() {
var current = $(this);
var inputs = $('.tank_id').not(this);
var result = inputs.filter(function(i, el) {
return $(current).prop("selectedIndex") === $(el).prop("selectedIndex");
});
if (result.length > 0) {
alert('Error: Selected Already')
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select class="tank_id" name="Form[tank_id][]">
<option hidden>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option hidden>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option hidden>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
This will only check if the value you're currently selecting is already selected in another list. So if you have selected 2 in the first two dropdowns, and then selects 1 in the last, the last won't give an error message.
$(".tank_id").on('change', function() {
var currentValue = $(this).val();
var inputs = $('.tank_id').not(this);
var matches = inputs.filter(function() {
return $(this).val() === currentValue;
});
if (matches.length > 0) {
alert('The current selectbox value is already selected somewhere else!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="tank_id" name="Form[tank_id][]">
<option value="">Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
I have the following HTML form:
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
How to select using (JavaScript or jQuery) all SELECT's from my form (only those having catid attribute) and show its catid attribute values and selected option values?
You can use filter() method passing the attribute selector as parameter:
var cat = [];
$('select').filter('[name^="catid"]').each(function() {
cat.push($(this).attr('name'));
});
alert(cat);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
You can use has attribute selector:
$('select[catid]');
And then iterate over returned elements using .each() and log the values and attributes.
Working Snippet:
$('select[catid]').each(function(){
console.log($(this).attr("catid"));
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2">2</option>
</select>
</form>
$('select[name^=catid]').each(function() {
console.log($(this).attr("catid")); // get attribute using this
console.log($(this).val()); // get selected value using this
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form name="catForm">
<select name="group">
<option value="1">Group 1</option>
<option value="2">Group 2</option>
</select>
<select name="catid[1]" catid="1">
<option value="1" selected>1</option>
<option value="2">2</option>
</select>
<select name="catid[3]" catid="3">
<option value="1">1</option>
<option value="2" selected>2</option>
</select>
</form>
I hope it should be help to you
var categories= $('[catid]').serialize();
console.log(categories);
This will be generate name and value mapping in querystring format you can use this string in ajax method as data as a post method.
See this: https://jsfiddle.net/gredztox/
You can use select[name^="catid"] method for selecting an multiple array elements with its name.
<script>
$(document).on('change','select',function(){
var catArr = [];
$('select[name^="catid"]').each(function() {
catArr.push($(this).val());
});
document.getElementById('result').innerHTML = catArr;
});
</script>
Your Final Output
I have 2 drop down lists of pairs of name IMEI's and cities, as following:
<HTML>
<body>
Select Programming font:
<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
</body>
</html>
The desired behavior is: when one selects a city name, the IMEI list enables; otherwise it is disabled.
How can I achieve this?
Thanks in advance!
Fiddle Demo
$(function () {
var sel_imie = $('select[name="IMEI"]');
sel_imei.prop('disabled', true); //disable IMEI select
$('select[name ="city"]').change(function () {
sel_imei.prop('disabled', false); //enable when value of city select is changed
});
});
.change()
Try this,
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Script
$('#city').on('change',function(){
$('#IMEI').attr('disabled',false);
});
Demo:http://jsfiddle.net/khmSm/
Select Programming font:
<select name="IMEI" disabled="disabled">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name="city">
<option value="">Select...</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
document.getElementsByName('city')[0].addEventListener('change', function(e){
var imei = document.getElementsByName('IMEI')[0];
var city = e.target;
imei.disabled = city.value != '' ? '' : 'disabled';
});
try this way
HTML CODE:
CITY :<select name="city">
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
<br/>
IMEI :<select name="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
JQUERY CODE:
$('select[name=IMEI]').prop('disabled',true);
$('select[name=city]').on('change',function () {
$('select[name=IMEI]').prop('disabled',false);
});
LIVE DEMO:
http://jsfiddle.net/dreamweiver/TvpRF/7/
Happy Coding :)
<select name="IMEI" disabled="disabled" id="IMEI">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">$</option>
</select>
<select name ="city" id="city">
<option value ="choose">Choose a city</option>
<option value="jhansi">Jhansi</option>
<option value="Delhi">Delhi</option>
<option value="Mumbai">Mumbai</option>
<option value="Kanpur">Kanpur</option>
</select>
Here is the link : http://jsfiddle.net/khmSm/1/
Disable select and update the plugin. Use trigger chosen:updated to disable the select widget.
$('#RefundType').prop('disabled', true).trigger("chosen:updated");