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

时间:2011-03-24 08:54:44

标签: javascript

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

我需要在javascript中获取所选选项的值:有没有人知道如何获取所选值或文本,请告诉我们如何为其编写函数。我已经分配了onchange()函数来选择那么我该怎么办?

14 个答案:

答案 0 :(得分:87)

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

答案 1 :(得分:20)

无需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;

答案 2 :(得分:16)

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>

答案 3 :(得分:16)

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

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

答案 4 :(得分:7)

哇,答案中还没有真正可重复使用的解决方案..我的意思是,一个标准的事件处理程序应该只得到一个event参数,并且根本不需要使用ID。我&#39; d使用方法:

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

或vanilla JS处理程序设置:

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

并且不必为每个select元素重写此内容。

示例摘录:

&#13;
&#13;
function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}
&#13;
<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>
&#13;
&#13;
&#13;

答案 5 :(得分:5)

使用

document.getElementById("select_id").selectedIndex

或者获得价值:

document.getElementById("select_id").value

答案 6 :(得分:4)

<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值,将选择视为数组,您将获得值

答案 7 :(得分:3)

HTML:

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

JS:

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

答案 8 :(得分:2)

我想知道每个人都发布了valuetext选项,可以从<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>
  

注意:在option值2的上述HTML中,label将返回 newText 而不是通讯

另外

  

注意:无法在Firefox中设置label属性(仅返回)。

答案 9 :(得分:2)

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>

答案 10 :(得分:2)

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

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

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

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

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

答案 11 :(得分:2)

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

答案 12 :(得分:2)

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

答案 13 :(得分:0)

我试图用自己的样本进行解释,但希望对您有所帮助。您不需要 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>