如何使用JavaScript将选中的选项获取为选择下拉标签

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

本文关键字：获取 选择 标签 选项 JavaScript 何使用      更新时间：2023-09-26

我是JavaScript的新手，我有以下问题:

在一个页面中，我有以下select下拉列表:

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

然后我有这个JavaScript函数，当用户在前面的select中选择一个选项时执行:

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

我怎样才能在这个JavaScript函数中获得所选选项的值?

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>

下面的代码应该可以为您工作。

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

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

我想你需要这样的东西

编辑:根据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>

相关文章：