1

When I use alert($("select").find("option:selected").val()); on a select that has no option selected, jQuery alerts the value of the first element within the select.

Why is that, and how do I get my expected return value of '' or even undefined?

Link to fiddle: jsfiddle

alert($(".select").find("option:selected").val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
KHansen
  • 784
  • 5
  • 21
  • 2
    if you want default select option as blank this link will help you https://stackoverflow.com/questions/8605516/default-select-option-as-blank – Hitesh Tripathi Nov 25 '19 at 08:32

2 Answers2

2

That is a good question. After investigating the source code, it seems that jQuery will return the value under the selectedIndex and it is 0 in both the cases below

My recommendation is to have a "Please select" without value - you can disable it so it is not sent to the server.

That also means your select will trigger onchange when the first actual value is selected AND HTML5 validation will make a required work

console.log($(".select1 option:selected").val(),
            $(".select2 option:selected").val());
console.log($(".select1")[0].selectedIndex,
            $(".select2")[0].selectedIndex);  
$(".select1 option").each(sel => console.log(sel.defaultSelected) )
$(".select2 option").each(sel => console.log(sel.defaultSelected) )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select1">
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>

<select class="select2">
  <option value="">Please select</option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  <option value="4">Test 4</option>
  <option value="5">Test 5</option>
</select>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
0

As your first option is selected as default then create an another option and set attributes of selected and disabled, Because user will not select that option 

alert($(".select").find("option:selected").val());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="select">
  <option selected disabled value="">Select Any Item</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
</select>
Ahmed Ali
  • 1,908
  • 14
  • 28