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

Question

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

Does this answer your question? [jQuery get value of select onChange](https://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange) — Jorge Fuentes González, Jun 10 '21 at 19:52

score 1 · Answer 1 · answered Jun 10 '21 at 19:54

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>

score 0 · Answer 2 · answered Jun 10 '21 at 21:04

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>

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

2 Answers2