Jquery Get Select Option Value Empty

jQuery find option in Select with empty/null value remove it and select the first option after it with a value

  • you can use .filter() to filter out the empty option elements and remove them all at once

  • use .prop() to set special attributes like selected

Code:

$('select option')
.filter(function() {
return !this.value || $.trim(this.value).length == 0;
})
.remove();

$('select option')
.first()
.prop('selected', true);​

DEMO

Check if selected dropdown value is empty using jQuery

You forgot the # on the id selector:

if ($("#EventStartTimeMin").val() === "") {
// ...
}

How to check all select option value is not an empty?

I think that a much simpler solution is to count the number of empty values you have within the .selectmenu elements:

$('.selectmenu').filter(function(){return $(this).val() == ''}).length

Here is a working snippet:

function selectValidation() {  var emptyvalues = $('.selectmenu').filter(function(){return $(this).val() == ''}).length;  if (emptyvalues) {    return false;  }  return true;}
$('#btn').click(function() { console.log($('.selectmenu').filter(function(){return $(this).val() == ''}).length)});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form name="selectForm" action="" onSubmit="return selectValidation();" method="POST">            <div>                <select class="selectmenu">                    <option value="">Select the value</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>                </select>            </div>            <div>                <select class="selectmenu">                    <option value="">Select the value</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>                </select>            </div>            <div>                <select class="selectmenu">                    <option value="">Select the value</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>                </select>            </div>            <div>                <select class="selectmenu">                    <option value="">Select the value</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>                </select>            </div>            <div>                <select class="selectmenu">                    <option value="">Select the value</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>                </select>            </div>            <div>                <button type="submit" class="btn">                    <i class="fa fa-btn fa-user"></i> Submit Answers                </button>            </div>        </form><br /><br /><button id="btn">count empty</button>

How to check whether a select box is empty using JQuery/Javascript

To check whether select box has any values:

if( $('#fruit_name').has('option').length > 0 ) {

To check whether selected value is empty:

if( !$('#fruit_name').val() ) { 

jQuery set select box to empty option

Add $('#select2').val('') at the last of select1's change event like following.

$("#select1").change(function () {
$('.quantity').val('');
$('#trblock').fadeIn();
if ($(this).data('options') == undefined) {
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html('<option value="">').append(options);

$('#select2').val(''); //add this line
});

Best way (with jQuery) to check that an empty <option> is not selected

I have used this:

$("#mySelect").change(function(){
if(!$("#mySelect option:selected").is('[value]'))
console.log('no value');
});

Working http://jsfiddle.net/5ht7g/

alert if option value is empty using jquery

you can use the .val property

if( $('#category').val() === '' )

Check Fiddle

All Select list options with a class and value not blank using jQuery

Maybe like this:

if(!$('#ShowTimeList option[value!=""]').not('.timeSoldOut').length){ alert('Time is over');}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="TimesSelect" id="ShowTimeList"> <option value="">Choose a Time</option> <option value="208292" disabled="disabled" class="timeSoldOut">10:50 AM - SOLD OUT</option> <option value="208464" disabled="disabled" class="timeSoldOut">11:00 AM - SOLD OUT</option> <option value="208636" disabled="disabled" class="timeSoldOut">11:10 AM - SOLD OUT</option> <option value="208808" disabled="disabled" class="timeSoldOut">11:20 AM - SOLD OUT</option> </select>


Related Topics



Leave a reply



Submit