JS implementation select select option trigger event operation example

This example describes the operation of triggering event by JS implementation of select option selection. Share it for your reference, as follows:

When we use the drop-down list box select, we need to trigger the event on the selected <option> option. In fact, <option> itself does not trigger the event method, we can only trigger it in the onchange method in the select.

If you want to add an option to trigger event, add onclick to the option and click it, but the event will not be triggered.

Add onclick to select again. Now it's fine. If you don't select option, it will be triggered.

Baidu said that option does not trigger events, and it is necessary to add onchange events to the select. Although I have dealt with similar problems, I forget if it is a pig's brain after using it...

Remember this time, it should

When we trigger the double-click event of select, use the ondblclick method.
When we want to get the selected event, use['name'].valueto get the name, where name is the name of select.
If we want to get all the values ​​of select, we can use a for loop to implement it. The code is as follows:

var vi = ['list'].length;
for(var i=0;i<vi;i++){
  document.(i).value; //form2 is the name of <form>}

JS implementation code:

‍‍<select  onchange="gradeChange()">
  <option grade="1" value="a">Option One</a>
  <option grade="2" value="b">Option 2</a>
</select>
<script type="text/JavaScript">
    function gradeChange(){
    var objS = ("pid");
    var grade = [].grade;
    alert(grade);
    }
</script>

jQuery implementation code:

<select name="myselect" >
  <option value="opt1">Options1</option>
  <option value="opt2">Options2</option>
  <option value="opt3">Options3</option>
</select>
$("#myselect").change(function(){
  var opt=$("#myselect").val();
  ...
});

Javascript gets the selected value in the select drop-down box

Now there is aid=testHow to get the selected value in the drop-down box?

Use javascript native methods and jquery methods respectively

<select  name="">
 <option value="1">text1</option>
 <option value="2">text2</option>
</select>

Code:

1. JavaScript native method

1. Get the select object:

var myselect=("test");

2. Get the index of the selected item:

var index=;
// selectedIndex represents the index of the item you selected

3. Get the value of the selected option:

[index].value;

4: Get the text of the selected options:

[index].text;

2. jquery method (provided that the jquery library has been loaded)

1. Get the selected item

var options=$("#test option:selected");

2. Get the selected item value

alert(());

3. Get the selected text

alert(());

For more information about JavaScript, readers who are interested in reading this site's special topic:A complete collection of operations and techniques related to JavaScript events》、《Summary of JavaScript DOM skills》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.