Home > Blockchain >  How to use Same function for diffrent dropdown with same functionality in javascript
How to use Same function for diffrent dropdown with same functionality in javascript

Time:05-05

function get(id) {
  $('.get_item').dblclick(function() {
   window.open( base_url   "edit/" id);
  });
  
  $('.get_customer').dblclick(function() {
     window.open( base_url   "edit/" id);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  onchange="get(this.value)" id='cus_id_1'>
  <option value='656'>test1</option>
  <option value='646'>test2</option>
  <option value='687'>test3</option>
</select>
<select  onchange="get(this.value)" id=' cus_id_2 '>
  <option value='566'>test4</option>
  <option value='474'>test5</option>
  <option value='589'>test6</option>
</select>

When select value from dropdown its works after selecting another value its getting previous selected value Any solution ??

CodePudding user response:

jQuery .dblclick() function will get fired automatically as soon as the field is double clicked as its an handler. You neither need get(id) nor need "onchange" event specified in HTML.

https://api.jquery.com/dblclick/

If you are looking for onchange handler, you can use Tomalak's solution.

CodePudding user response:

function get(ele) {
  alert(ele.value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  onchange="get(this)" id='cus_id_1'>
  <option value='656'>test1</option>
  <option value='646'>test2</option>
  <option value='687'>test3</option>
</select>
<select  onchange="get(this)" id=' cus_id_2 '>
  <option value='566'>test4</option>
  <option value='474'>test5</option>
  <option value='589'>test6</option>
</select>

CodePudding user response:

  • Pass another argument el to refer to this in the function get(el , id).. And use it onchange="get(this , this.value)" Or you can use @jilykate answer by passing only el .. get(el) and Inside the function use $(el).val() or el.value instead of id
  • Use .off("dblclick") to stop the previous dblclick action
  • Enough to use one dblclick event handler inside the function

Example #1 using get(el , id)

function get(el , id) {
  $(el).off("dblclick").dblclick(function() {
   console.log("edit/" id);
   //window.open( base_url   "edit/" id);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  onchange="get(this , this.value)" id='cus_id_1'>
  <option value='656'>test1</option>
  <option value='646'>test2</option>
  <option value='687'>test3</option>
</select>
<select  onchange="get(this,this.value)" id=' cus_id_2 '>
  <option value='566'>test4</option>
  <option value='474'>test5</option>
  <option value='589'>test6</option>
</select>

Example #2 using get(el)

function get(el) {
  $(el).off("dblclick").dblclick(function() {
   console.log("edit/" el.value);
   //window.open( base_url   "edit/" el.value);
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  onchange="get(this , this.value)" id='cus_id_1'>
  <option value='656'>test1</option>
  <option value='646'>test2</option>
  <option value='687'>test3</option>
</select>
<select  onchange="get(this,this.value)" id=' cus_id_2 '>
  <option value='566'>test4</option>
  <option value='474'>test5</option>
  <option value='589'>test6</option>
</select>

Example #3 using .on("change" event with no need for inline events at all

$(".get_item , .get_customer").on("change" , function() {
  $(this).off("dblclick").dblclick(function() {
   console.log("edit/" this.value);
   //window.open( base_url   "edit/" this.value);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  id='cus_id_1'>
  <option value='656'>test1</option>
  <option value='646'>test2</option>
  <option value='687'>test3</option>
</select>
<select  id=' cus_id_2 '>
  <option value='566'>test4</option>
  <option value='474'>test5</option>
  <option value='589'>test6</option>
</select>

  • Related