How can I obtain the selected option into a select dropodown tag using JavaScript?

Question

I am pretty new in JavaScript and I have the following problem.

Into a page I have the following select dropdown:

<select id="selTipoRap" class="form-control" th:field="*{tipoRappresentante}" required="required" style="width: 55%;" onChange="nascondiBoxDocumentazione(this);">
    ......................................................................
    ......................................................................
    OPTIONS LIST
    ......................................................................
    ......................................................................
</select>

Then I have this JavaScript function that is performed when the user selects an option into the previous select:

function nascondiBoxDocumentazione(ruoloSelezionato) {
    alert("NASCONDI");
}

How can I obtain the value of the selected option into this JavaScript function?

Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — nils, Oct 07 '15 at 14:32

score 3 · Accepted Answer · answered Oct 07 '15 at 14:31

3

function nascondiBoxDocumentazione(ruoloSelezionato) {
    alert(ruoloSelezionato.value);
}

<select id="selTipoRap" class="form-control"  style="width: 55%;" onChange="nascondiBoxDocumentazione(this);">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

answered Oct 07 '15 at 14:31

ram hemasri

1,624
11
14

1

inline javascript belongs in history books. – Alexander Solonik Oct 07 '15 at 14:32

score 1 · Answer 2 · answered Oct 07 '15 at 14:29

1

The below code should work for you.

 $('#selTipoRap').on('change' , function(){
       nascondiBoxDocumentazione($(this).val());
  });

for <select> usually i always use the change event.

answered Oct 07 '15 at 14:29

Alexander Solonik

9,838
18
76
174

Ant · Answer 3 · 2015-10-07T14:41:29.597

I think you want something like this

EDIT: Following a comment from Alexander Solonik, my previous answer was not optimal, this should be much more efficient.

$('#selTipoRap').on('change', function() {
    alert($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selTipoRap">
  <option value="0">Zero</option>
  <option value="1 ">One</option>
  <option value="2 ">Two</option>
  <option value="3 ">Three</option>
</select>

A pure JavaScript solution:

var selTipoRap = document.getElementById('selTipoRap');

selTipoRap.onchange = function() {
  alert(selTipoRap.value)  
}

<select id="selTipoRap">
  <option value="0">Zero</option>
  <option value="1 ">One</option>
  <option value="2 ">Two</option>
  <option value="3 ">Three</option>
</select>

@AlexanderSolonik, you're right. I was attempting to closely replicate the original code, but I've update my answer to be more optimal now. — Ant, Oct 07 '15 at 14:36

How can I obtain the selected option into a select dropodown tag using JavaScript?

3 Answers3