Get alerted when the value of select (dropdown) became empty

Get alerted when the value of select (dropdown) became empty - javascript

I have a dropdown that has a couple of options one of them is empty, the same as the following code bellow.
I want to write a jquery code that keep tracking the dropdown and console.log("empty") when i select the empty option then console.log("not empty") when i choose anything else
The HTML code:
<select id="month">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Thanks

You could use Vanilla JS do to it, like this:
let month = document.querySelector("#month");
month.addEventListener("change", (e)=>{
if(e.target.value === ""){
console.log("Empty");
}else{
console.log("Not Empty");
}
});
console.log(month.value);
<select id="month">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Was that what you wanted?
function myFunction(){
if ($('#month').find(":selected").val() != '') console.log('Not Empty')
else console.log('Empty')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="month" onchange="myFunction()">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

Related

Element by Name on load setting value

Trying to get the page to load with default selected option 2
Well neither are working, what's correct?
My HTML is like this, no ID or class
$(window).load(function() {
$("tour-adult[]").value = 3;
document.getElementById("tour-adult[]").value = 4;
});
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</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>
</select>
</div>

Using jQuery:
Use .on('load', () {...} instead of .load() - Why?
Use an attribute selector like $("[attribute='attributeName']")
Pass the value as a String, not a Number
$(window).on('load', function() {
$('select[name="tour-adult[]"]').val('3');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</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>
</select>
</div>

As far as your first attempt, try selecting the select element by it's name attribute and using jQuery's val() method to set the value:
$("select[name='tour-adult[]']").val(3);
You currently don't have an id assigned to the select. If you want to go native, you'd use something like querySelector:
document.querySelector("select[name='tour-adult[]']").value = 4;
$(window).on('load', function() {
$("select[name='tour-adult[]']").val(3);
console.log($("select[name='tour-adult[]']").val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tourmaster-combobox-wrap">
<select name="tour-adult[]">
<option value="">Adult</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>
</select>
</div>

If you want to call it by ID, you will need to add an ID. I removed your jquery and added an ID and its working.
document.getElementById("tour-adult").value = 4;
<div class="tourmaster-combobox-wrap">
<select id="tour-adult" name="tour-adult[]">
<option value="">Adult</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>
</select>
</div>

Get multiple selected text options with JavaScript

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="">

How to check if same option is selected in a dynamically created form rows

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>

How to enable/disable drop down list box in HTML + Javascript/JQuery?

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");

Java Script DrobDown Disable Mark

Here is my question, for exp:
<select name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
If I select (number 1) from (select1), then (select2) totally will be disabled. or if i select (number4) from (select2) then (select1) totally will be disabled.
I mean depends on select name, other select name will be disabled.
Is it possible to give me the java code for this ?
Thank you

Using jquery, it'd be something like this. jsfiddle
HTML:
<select id="select1" name="select1" >
<option value="default" selected="selected">Default</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="select2" id="select2" >
<option value="default" selected="selected">Default</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
JS:
$('#select1').on('change', function(){
if($(this).val() != 'default'){
$('#select2').prop('disabled', true);
}
else{
$('#select2').prop('disabled', false);
}
});
$('#select2').on('change', function(){
if($(this).val() != 'default'){
$('#select1').prop('disabled', true);
}
else{
$('#select1').prop('disabled', false);
}
});
As I said, you need to correct your html as well. In your website, use the following html instead of what you have i.e. add ID's to your select dropdown.
<select id="select1" name="select1" ...
<select id="select2" name="select2" ...

Develop Reference

JavaScript is the programming language of the Web.

Get alerted when the value of select (dropdown) became empty - javascript

Related

Element by Name on load setting value

Get multiple selected text options with JavaScript

How to check if same option is selected in a dynamically created form rows

How to enable/disable drop down list box in HTML + Javascript/JQuery?

Java Script DrobDown Disable Mark

Categories

Resources