Alert select box option

Question

I have a form with several options.

If the user selects one of the options with value="none" I want to display an alert message saying "Select one of the options"

Question

How do I do it?

<div id="search-box-wrapper-time">
  <form>
    <div>
      <select id="lang">
        <option value="next_week"> Next Week</option>
        <option value="this_weekend"> This Weekend</option>
        <option value="this_week"> This Week</option>
        <option value="tomorrow">Tomorrow</option>
        <option value="today">Today</option>
        <option value="none" selected>Select when</option>
      </select>
    </div>
  </form>
</div>

Possible duplicate of [Get selected value in dropdown list using JavaScript?](https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — Sachin Rajput, Jan 07 '18 at 13:30

score 0 · Answer 1 · answered Jan 07 '18 at 13:04

Just try ('#lang').val() like below

$('#lang').on('change', function() {
  //console.log($(this).val())
  if ($(this).val() == 'none') {
    alert('Select one of the options')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="search-box-wrapper-time">
  <form>
    <div>
      <select id="lang">
        <option value="next_week"> Next Week</option>
        <option value="this_weekend"> This Weekend</option>
        <option value="this_week"> This Week</option>
        <option value="tomorrow">Tomorrow</option>
        <option value="today">Today</option>
        <option value="none" selected>Select when</option>
      </select>
    </div>
  </form>
</div>

score 0 · Answer 2 · answered Jan 07 '18 at 13:07

Try this out:

  function selectOption(select) {
       if(select.options[select.selectedIndex].value == "none"){
             alert("Select one of the options");
       }
  }

  <div id="search-box-wrapper-time">
    <form>
      <div>
        <select id="lang" onchange="selectOption(this)">
          <option value="next_week"> Next Week</option>
          <option value="this_weekend"> This Weekend</option>
          <option value="this_week"> This Week</option>
          <option value="tomorrow">Tomorrow</option>
          <option value="today">Today</option>
          <option value="none" selected>Select when</option>
        </select>
      </div>
    </form>
  </div>

Alex Hunter · Answer 3 · 2018-03-22T15:51:45.620

-1

If you want to prevent the user choose "none". You can do it like this with jquery.

var values = $("#lang").val();
if (values == "none") 
{
alert("pick one");
}
else
{
// do this 
}

edited Mar 22 '18 at 15:51

answered Jan 07 '18 at 12:52

Alex Hunter

212
9
30

Alert select box option

3 Answers3