根据选项选择具有值的onchange调用方法

Question

This following method is already called from multiple different places so I wouldn't like to change signature.

doSomething(json){
  ...
}

Now I also need to call this method each time a new option is selected from a select field. Each option has some specific json to that option. I need to achieve something like this:

<select onchange="doSomething(json)">
  <option value="1" json="{'key': 'json1'}">name 1</option>
  <option value="2" json="{'key': 'json2'}">name 2</option>
</select>

How can I get the json attribute of selected option to the method?

Answer 1

I would recommend you to use custom data-* attribute to persist arbitrary information which can be retrived later by using .data(key)

As you don't want to modify the doSomething method, attach another click handler. You can target the option using :selected selector

 $('#yourSelect').on('change', function() { //Retrieve data var json = $(this).find(':selected').data('json'); //call the method doSomething(json); }).change(); function doSomething(json) { console.clear(); console.log(json); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="yourSelect"> <option value="1" data-json='{"key": "json1"}'>name 1</option> <option value="2" data-json='{"key": "json2"}'>name 2</option> </select> 

Answer 2

Any code run from the onchange="" handler has this set to the element it's an attribute of, namely the select element. Therefore the following code works:

 <select onchange="alert(this.options[this.selectedIndex].getAttribute('json'))"> <option value="1" json="{'key': 'json1'}">name 1</option> <option value="2" json="{'key': 'json2'}">name 2</option> </select> 

As another poster said, it is recommended to prepend such attribute names with data- :

data-* - HTML | MDN