从更改时选择中获取选定的值/文本

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

我需要在javascript中获取选定选项的值：有谁知道如何获取选定值或文本，请告诉如何为它编写函数。我已分配onchange（）函数进行选择，因此之后该怎么办？

为此使用JavaScript或jQuery。

使用JavaScript

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

使用jQuery

$('#select_id').change(function(){
    alert($(this).val());
})

如果您要对此进行搜索，并且不希望事件监听器成为属性，请使用：

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

不需要onchange函数。您可以在一行中获取值：

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

或者，将其拆分以提高可读性：

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

哇，答案中还没有真正可重用的解决方案。.我的意思是，一个标准事件处理程序应该只获取一个event参数，而根本不必使用id。

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

您可以在每个内联js中使用此处理程序：

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery的：

jQuery('#select_id').on('change',handleSelectChange);

或香草JS处理程序设置：

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

并且不必为select您拥有的每个元素都重写它。

示例片段：

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

使用

document.getElementById("select_id").selectedIndex

或获得价值：

document.getElementById("select_id").value

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

在警报中，您将看到所选索引的INT值，将所选内容视为数组，您将获得该值

HTML：

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

JS：

function cityChanged(city) {
    alert(city);
}

我想知道每个人都发表了有关的选择value和text选择的信息<option>，但没有人建议label。

所以我也建议label所有浏览器都支持

获得value（与其他人建议的相同）

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

获得option text（即通信或-Select-）

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

或 （新建议）

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

的HTML

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

注意：在上面的HTML中，option值为2，label将返回newText而不是Communication

也

注意：无法在Firefox中设置label属性（仅返回）。

这是一个古老的问题，但是我不确定为什么人们不建议使用事件对象来检索信息，而不是再次搜索DOM。

只需在函数onChange中遍历事件对象，请参见下面的示例

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

如果这不是7年前的默认行为，可能对今天查找的人有用

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

我尝试用自己的样本进行解释，但希望对您有所帮助。您不需要onchange =“ test（）”。请运行代码段以获取实时结果。

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>