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

Question

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

我需要在javascript中获取所选选项的值:有没有人知道如何获取所选值或文本,请告诉我们如何为它编写函数.我已经分配了onchange()函数来选择那么我之后做了什么？

Answer 1

为此使用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());
})

Answer 2

不需要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;

Answer 3

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

Answer 4

如果您正在使用Google搜索,并且不希望事件侦听器成为属性,请使用:

document.getElementById('select_id').addEventListener('change', function(){
    this.value;
});

Answer 5

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

Answer 6

哇，答案中还没有真正可重用的解决方案。.我的意思是，一个标准的事件处理程序应该只获取一个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) {

    // 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
}

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

Answer 7

为什么让它过于复杂：

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
  console.log(select.value);

  // or if it changes dynamically
  console.log(e.target.value);      
});

var select = document.querySelector('select#id.orClass');
select.addEventListener('change', function(e) {
  console.log(select.value);

  // or if it changes dynamically
  console.log(e.target.value);      
});

 let select = document.getElementById('select_id');
  select.addEventListener('change', function() {
    console.log(select.value);
    // just for test
    alert(select.value);
  });

Answer 8

HTML：

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

JS：

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

Answer 9

<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 值，将选择视为一个数组，您将获得该值

Answer 10

        $('#select_id').change(function(){
        // selected value 
        alert($(this).val());
        // selected text 
        alert($(this).find("option:selected").text());
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<select onchange="test()" id="select_id">
        <option value="0">-Select-</option>
        <option value="1">Communication</option>
    </select>

Answer 11

使用

document.getElementById("select_id").selectedIndex

或者获得价值:

document.getElementById("select_id").value

Answer 12

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

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

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

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

获取option text（即通信或-选择-）

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 属性（只能返回）。