Question

以下方法已经从多个不同的地方调用，因此我不想更改签名。

doSomething(json){
  ...
}

现在，每次从选择字段中选择新选项时，我还需要调用此方法。每个选项都有一些特定的json到该选项。我需要实现这样的目标：

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

如何获取方法的json选项的selected属性？

Answer 1

我建议您使用自定义data-*attribute来保留随后可以使用.data(key)

重新获取的任意信息

由于您不想修改doSomething方法，请附加另一个单击处理程序。您可以使用: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

从onchange=""处理程序运行的任何代码都将this设置为它所属的元素，即select元素。因此，以下代码有效：

<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>

正如另一张海报所说，建议在data-之前添加这些属性名称：

data-* - HTML | MDN

选择onchange calls方法，其值取决于选项

2 个答案: