如何使用 JavaScript 将所选选项获取到选择下拉标签中？

Question

我是 JavaScript 新手，遇到以下问题。

进入一个页面，我有以下 select 下拉菜单：

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

然后我有这个 JavaScript 函数，当用户选择一个选项进入前一个选择时执行：

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

如何在这个 JavaScript 函数中获取所选选项的值？

Answer 1

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>

Answer 2

下面的代码应该适合你。

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

对于<select>，通常我总是使用 change 事件。

Answer 3

我想你想要这样的东西

编辑：根据 Alexander Solonik 的评论，我之前的回答不是最佳的，这应该更有效率。

$('#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>

纯 JavaScript 解决方案：

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>