How to call onchange event when dropdown values are same

Question

I am using Jquery chosen plugin and it's working fine. I have used this plugin in my one of the module. My dropdown values are something like that:

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

It's working fine. But problem is that when user select first option and then try to change third option onchange event does not fire because both options values are same. Is there any way to call onchange event every time if values are same or differ ?

Options values is a unique key of item so it's repeated in dropdown. Dropdown value is duplicate we have allowed to use same item in others module

Firstly, I don't understand the reason why you should be using two options with the same value. Secondly, you don't have to call onChange() because the value is already there. onChange event will always be called only if there is change in value. — Teja, Jun 16 '16 at 05:00
@teja I've come across this use case before. It's pretty common to have more than one items in a select with different values but same label. In his example he has same label/same value twice but I'm willing to bet this is just testing. — mwilson, Jun 16 '16 at 05:03
@Teja : I have used same value because we have get data from database for get product details which. is there any other event which I will use instead of onchange ? — Hkachhia, Jun 16 '16 at 05:04
@Teja: I have checked your answer but problem is that if I will apply hack like you then need to change php code of save data — Hkachhia, Jun 16 '16 at 05:35
What about appending an increment in the options and using the PHP's explode function to retrieve it. like: this way onchange will trigger and when you submit the form you can explode and get the correct value. — abhiklpm, Jun 16 '16 at 05:35
I guess its working fine. [JSFiddle](https://jsfiddle.net/RajeshDixit/fz2h15kv/) — Rajesh, Jun 16 '16 at 05:36
@Rajesh: yes right , I have tested it with jquery chosen plugin ? I have already told in my question I am using jquery chosen — Hkachhia, Jun 16 '16 at 05:38

score 1 · Answer 1 · answered Jun 16 '16 at 05:16

I saw your implementation and it is working fine in code pen here is the link no need to change anything

<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

Austin Pocus · Answer 2 · 2016-06-16T05:25:14.057

0

Edit: This doesn't work. Sorry!

You could add a data attribute that differs for each element, for example:

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

If you're using Rails or another framework to generate the <option> tags, it should be easy to add an incremental id to each element.

edited Jun 16 '16 at 05:25

answered Jun 16 '16 at 05:02

Austin Pocus

993
11
18

I am using php with jquery. I am able to add data-id but I have doubt after adding data-id change event is call or not – Hkachhia Jun 16 '16 at 05:06
I'm not sure either, but it sounds like the event isn't being called because the elements are exactly the same. – Austin Pocus Jun 16 '16 at 05:06
@Hkachhia, it wont be called as value is still the same – Rajesh Yogeshwar Jun 16 '16 at 05:12
Is there a reason why you need multiple `option` tags with the same value? – Austin Pocus Jun 16 '16 at 05:15
Yes, reason is that, user have select two parent item and both are use same sub item so it will fill in dropdown based on parent item – Hkachhia Jun 16 '16 at 05:18
Gotcha. Sorry I couldn't be of more help. If I think of anything I'll post another answer. – Austin Pocus Jun 16 '16 at 05:24

score 0 · Answer 3 · answered Jun 16 '16 at 05:20

0

Try this

$('#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>

answered Jun 16 '16 at 05:20

Krupesh Kotecha

2,396
3
21
40

It's call event on click as well as onchange – Hkachhia Jun 16 '16 at 05:25
yup, so you want to prevent onChange? – Krupesh Kotecha Jun 16 '16 at 05:29

score 0 · Answer 4 · answered Jun 16 '16 at 05:27

There is no way to fire get_data() with your current data. The solution below is more of a hack. When you populate the options, prepend the value with something unique. Eg.

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

Thus your get_data() method will be called everytime. And in your get_data() method, split the value using underscore _ and you can get the actual value there.

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

You can use other characters like $, or anything you like, instead of _

score 0 · Answer 5 · answered Jun 16 '16 at 05:46

Ideally you want to change the data coming from the backend so that you don't get duplicate data. However if this is not possible, another approach would be to sanitise the data before putting it in the select. 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);

score 0 · Answer 6 · answered Jun 16 '16 at 10:59

i am using jquery instead of java script

<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);
})

How to call onchange event when dropdown values are same

6 Answers6

Linked