Question

我想在更改数据列表时获取选定的数据列表属性值我的问题是完全不同的，因为我希望我的代码在javascript中而不在jquery中。

function get_data() {
  var sel = document.getElementById("data");
  var get_value_of_selected_datalist = sel.getElementsByTagName("option")[sel.selectedIndex].getAttribute("value");
  alert(get_value_of_selected_datalist);
}

<datalist id="data" onchange="get_data()">
    <option value="one">Option 1 Here</option> 
    <option value="two">Option 2 Here</option>
</datalist>

Answer 1

function get_data(){
var sel = document.getElementById("data");
var get_value_of_selected_datalist = sel.getElementsByTagName("option")[sel.selectedIndex].getAttribute("value");
alert(get_value_of_selected_datalist);
}

<select id="data" onchange="get_data()">
    <option value="one">Option 1 Here</option> 
    <option value="two">Option 2 Here</option>
</select>

注意：

第1点：<select>元素用于创建下拉列表。

第2点：<option>元素内的<select>标签定义了列表中的可用选项

Answer 2

<datalist>标记指定<input>元素的预定义选项列表。

我认为您使用的是datalist而不是select标签

将datalist替换为select标签。

get_data = function() {
  var sel = document.getElementById("data");
  var get_value_of_selected_datalist = sel.getElementsByTagName("option")[sel.selectedIndex].getAttribute("value");
  console.log(get_value_of_selected_datalist);
}

<select id="data" onchange="get_data()">
  <option value="one">Option 1 Here</option>
  <option value="two">Option 2 Here</option>
</select>

或者，如果您想使用<datalist>，则可以在<input>标签上使用事件onchange，并检查输入的值是否在数据列表的值中。

像

get_data = function(elem) {
  var options = document.getElementById('data').getElementsByTagName('option');
  var optionVals = [],
    i = 0;

  for (i; i < options.length; i += 1) {
    optionVals.push(options[i].value);
  }

  if (optionVals.indexOf(elem.value) > -1) {
    console.log(elem.value);
  }
}

<input list="data" onchange="get_data(this)">
<datalist id="data">
    <option value="one">Option 1 Here</option> 
    <option value="two">Option 2 Here</option>
</datalist>

Answer 3

执行类似的操作，将事件作为参数传递给函数。事件将从调用的地方保存HTML的值。

        function get_data(event){
        alert(event.target.value);
        }

     <select id="data" onchange="get_data(event)">
            <option value="one">Option 1 Here</option> 
            <option value="two">Option 2 Here</option>
        </select>

Answer 4

function get_data(){
  var val = document.getElementById("data1").value;
  alert(val);
}

<input id="data1" list="data" onChange="get_data()">
<datalist id="data">
    <option value="one">Option 1 Here</option> 
    <option value="two">Option 2 Here</option>
</datalist>

Answer 5

您将需要input并将更改事件监听器添加到该输入

function get_data(elem) {
  alert(elem.value)
}

<input list="data" name="data" onchange='get_data(this)'>
<datalist id="data">
    <option value="one">Option 1 Here</option> 
    <option value="two">Option 2 Here</option>
</datalist>

Answer 6

在代码中添加输入标签，然后在该标签中应用onchange事件

<input list="courses" name="courses" onchange="getData(this)">

检查以下代码可能会有所帮助

function getData(obj){
alert(obj.value)
}

<input list="courses" name="courses" onchange="getData(this)">
<datalist id="courses">
  <option value="Java">
  <option value="JavaScript">
  <option value="Node">
  <option value="Artificial Intelligence">
  <option value="Machine Learning">
</datalist>

注意：Internet Explorer 9和更早版本或Safari 12.0和更早版本不支持datalist标签。

如何通过javascript在数据列表上使用onchange函数？

6 个答案: