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

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

如果您正在谷歌搜索此内容，并且不希望事件侦听器成为属性，请使用：

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>

Answer 3

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

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 the value
}

你可以将此处理程序与每个 - 内联 js：

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

jQuery：

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

或 vanilla 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>

Answer 4

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

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

Answer 5

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

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

Answer 7

我想知道每个人都发布了从 获取 value 和 text 选项，但没有人建议 label。

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

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

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

获取 option text< /code>（即通信或-选择-）

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

OR（新建议）

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>

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

另外

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

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

为什么让它过于复杂：

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);
  });

<select id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

Answer 10

使用

document.getElementById("select_id").selectedIndex

Or 来获取值：

document.getElementById("select_id").value

Answer 11

<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 12

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

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

只需浏览函数 onChange 中的事件对象，请参阅下面的示例

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

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

如果这不是 7 年前的默认行为，那么今天查找此内容的人可能会有用

Answer 14

在 html 中

(change)="onChangeCategory($event)"

在 javascript/typescript 中

onChangeCategory(event: any) {
    console.log(event.target.options[event.target.selectedIndex].value);
    console.log(event.target.options[event.target.selectedIndex].text);
}

Answer 15

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>

Answer 16

您可以通过将“this.value”作为参数传递给名为 test(this.value) 的函数，然后从 select 元素中获取值
您应该在脚本元素内创建带有参数的函数，最后您可以在此函数内写入 console.log(number) 来获取您选择的值。

function test(number) {
  console.log(number)
}

<!DOCTYPE html>
<html>

<body>

  <p>Select a new car from the list.</p>
  <select onchange="test(this.value)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
  </select>

</body>

</html>

Answer 17

调用 onChange 后，您可以添加 JS 或 JQuery 代码片段来让您的想法发挥作用。

//Javascript

document.getElementById("select_id").selectedIndex // prints text value of the option
document.getElementById("select_id").value // prints the value of the option 

//JQUERY 

var selected = $('#select_id option:selected').val(); 
// prints the **value** of the option clicked in the dropdown
    
var selected = $('#select_id option:selected').html(); 
// prints the **text** of the option clicked in the dropdown

Answer 18

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;

Answer 19

您将 onchange 处理程序设置为某个函数或字符串。在其中，您编写代码来获取值

document.getElementById('cphForm_ddlFacility').value;

，或者对于旧版浏览器

document.getElementById('cphForm_ddlFacility')[document.getElementById('cphForm_ddlFacility').selectedIndex].value