how can i use onchange function on datalist by javascript? - Stack Overflow

admin管理员组

文章数量:1304253

I want to get selected datalist attribute value when i change datalist my question is total different because i want my code in javascript not in 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>

I want to get selected datalist attribute value when i change datalist my question is total different because i want my code in javascript not in 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>

• javascript

Share Improve this question Follow edited May 24, 2019 at 10:42 Bhavik Kalal asked May 24, 2019 at 9:41 Bhavik KalalBhavik Kalal 6511 gold badge11 silver badge99 bronze badges 2

• what's error in the code? change your datalist to select – Kaushik Commented May 24, 2019 at 9:43
• 2 i want only datalist – Bhavik Kalal Commented May 24, 2019 at 9:52

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 5

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>

The <datalist> tag specifies a list of pre-defined options for an <input> element.

I think you are using datalist instead select tag

Replace the datalist by select tag.

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>

---

Or if you want to use <datalist> you can use event onchange on the <input> tag and check if the value of your input is into the values of datalist.

Like

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>

You will need an input and add the change eventlistener to that 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>

Add input tag in your code apply onchange event in that tag

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

Check the below code it may helpful

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>

Note: The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari 12.0 and earlier versions.

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>

Note:

Point 1: <select> element is used to create a drop-down list.

Point 2: <option> tags inside the <select> element define the available options in the list

Do something like this, pass event as a parameter to the function. Event will hold the value of HTML from where it is called.

        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>
        

本文标签： how can i use onchange function on datalist by javascriptStack Overflow