Question

我正在使用Jquery选择的插件，它工作正常。我在我的一个模块中使用过这个插件。我的下拉值是这样的：

<select id="itemcode" onchange="get_data()">
   <option value="1">ITEM001</option>
   <option value="2">ITEM002</option>
   <option value="1">ITEM001</option>
   <option value="3">ITEM003</option>
</select>

它工作正常。但问题是，当用户选择第一个选项然后尝试更改第三个选项时，onchange事件不会触发，因为两个选项值都相同。如果值相同或不同，有没有办法每次调用onchange事件？

选项值是项的唯一键，因此在下拉列表中重复。下拉值是重复的，我们允许在其他模块中使用相同的项目

Answer 1

我看到了你的实现，它在代码笔中工作正常，这里的链接不需要改变任何东西

<select id="itemcode" onchange="get_data()">
<option value="1">ITEM001</option>
<option value="2">ITEM002</option>
<option value="1">ITEM001</option>
<option value="3">ITEM003</option>
</select>

var get_data =function(){
alert("saas")
}

http://codepen.io/vkvicky-vasudev/pen/dXXVzN

Answer 2

编辑：这不起作用。遗憾！

您可以为每个元素添加不同的数据属性，例如：

<select id="itemcode" onchange="get_data()">
  <option value="1" data-id="1">ITEM001</option>
  <option value="2" data-id="2">ITEM002</option>
  <option value="1" data-id="3">ITEM001</option>
  <option value="3" data-id="4">ITEM003</option>
</select>

如果您使用Rails或其他框架生成<option>标记，则应该很容易为每个元素添加增量ID。

Answer 3

试试这个

$('#itemcode').click(function() {
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="itemcode">
  <option value="1">ITEM001-A</option>
  <option value="2">ITEM002</option>
  <option value="1">ITEM001-B</option>
  <option value="3">ITEM003</option>
</select>

Answer 4

无法使用您当前的数据触发get_data()。下面的解决方案更像是一个黑客攻击。填充选项时，请在值前加上唯一的值。例如

<select id="itemcode" onchange="get_data()">
<option value="1_1">ITEM001</option>
<option value="2_2">ITEM002</option>
<option value="3_1">ITEM001</option>
<option value="4_3">ITEM003</option>
</select>

因此，每次都会调用get_data()方法。在您的get_data()方法中，使用下划线_分割值，您可以在那里获得实际值。

function get_data(){
   var actualValue=$(this).val().split("_")[1];
   //do other processing
   ...
}

您可以使用其他字符，例如$或任何您喜欢的字符，而不是_

Answer 5

理想情况下，您希望更改来自后端的数据，以便您不会获得重复数据。但是，如果无法做到这一点，另一种方法是在将数据放入选择之前对数据进行清理。 E.g

https://jsfiddle.net/vuks2bpt/

var dataFromBackend = [
    {key:1,
  value: "ITEM0001"
  },
  {key:2,
  value: "ITEM0002"
  },
  {key:1,
  value: "ITEM0001"
  },
  {key:3,
  value: "ITEM0003"
  }
];

function removeDuplicates(array){
    var o = {};
    array.forEach(function(item){
    o[item.key] = item.value;
  });

  return o;  
}

function get_data(){
    console.log('get_data');
}

var sanitised = removeDuplicates(dataFromBackend);

var select = document.createElement('select');
select.id = "itemcode";
select.addEventListener('change', get_data);

Object.keys(sanitised).forEach(function(key){
    var option = document.createElement('option');
    option.value = key;
  option.textContent = sanitised[key];
  select.appendChild(option);
})

document.getElementById('container').appendChild(select);

Answer 6

我正在使用jquery而不是java脚本

<select id="itemcode">
 <option value="1">ITEM001</option>
 <option value="2">ITEM002</option>
 <option value="1">ITEM001</option>
<option value="3">ITEM003</option>
 </select>

jquery的

$('#itemcode:option').on("click",function(){
alert(saaas);
})

下拉值相同时如何调用onchange事件

6 个答案: