jQuery将单击事件绑定到选择元素的每个选项上的按钮

Question

I'm trying to make a click event on submit button on each option element of select.

Here is my script:

var selectObj = $("#selectObj");

selectObj.find("option").each(function(){
    selectObj.val($(this).val());
    $("#submitBtn").click();
});

But, it just work on the last option element.

Answer 1

The value will be set to the element on change event.

 var select; $(document).ready(function(){ $('#s > option').each( function(e){ select=$('#s > option')[e].innerHTML a(select); }) function a(val) { $('button').trigger('click'); console.log('The values is ' +val) } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="s"><option>a</option> <option>d</option><option>b</option> <option>e</option><option>c</option></select> <button type="submit">Submit</button> 

Answer 2

But, it just work on the last option element.

I don't know what you are trying to achieve, but your code should work.

Also not sure about the usage of selectObj.val($(this).val());

 var selectObj = $("#selectObj"); selectObj.find("option").each(function(){ //selectObj.val($(this).val()); $("#submitBtn").click(myFunc($(this).val())); }); function myFunc(val){ console.log(val); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="selectObj"> <option value="first">First</option> <option value="second">Second</option> </select> <button type="button" id="submitBtn" >Test</button>