JQuery - random code generator on selecting data in select options without if condition

Question

I'm writing the code for generating random code using jQuery. It was working fine. But I used if condition to achieve that. What I need is to write that function without if conditions... how can I get that ?

  function getcodes() { var input_data = $('.getvalue').val(); var select_data = $('.control').val(); if(select_data == "Binary" ) { select_data = "BY"; } else if(select_data == "Alpha" ) { select_data = "AA"; } else if(select_data == "AlphaNumeric" ) { select_data = "AN"; } else if(select_data == "Numeric" ) { select_data = "NC"; } else { select_data =""; } $('.disabled').val(input_data + select_data); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="">select</option> <option value="Binary">Binary</option> <option value="Alpha">Alpha</option> <option value="AlphaNumeric">AlphaNumeric</option> <option value="Numeric">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div> 

Answer 1

If you can change value of options, use it, else - use data api

 function getcodes() { $('.disabled').val($('.getvalue').val() + $('.control option:selected').data('val')); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="" data-val="">select</option> <option value="Binary" data-val="BY">Binary</option> <option value="Alpha" data-val="AA">Alpha</option> <option value="AlphaNumeric" data-val="AN">AlphaNumeric</option> <option value="Numeric" data-val="NC">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div> 

Answer 2

You can use object. Like this.

 var codesArray = { "Binary": "BY", "Alpha": "AA", "AlphaNumeric": "AN", "Numeric": "NC" }; function getcodes() { var input_data = $('.getvalue').val(); var select_data = $('.control').val(); $('.disabled').val(input_data + codesArray[select_data]); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="">select</option> <option value="Binary">Binary</option> <option value="Alpha">Alpha</option> <option value="AlphaNumeric">AlphaNumeric</option> <option value="Numeric">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div> 

Answer 3

Try with single line if condition

 function getcodes() { var input_data = $('.getvalue').val(); var select_data = $('.control').val(); select_data = select_data == "Binary" ? "BY" : (select_data == "Alpha") ? "AA" : (select_data == "AlphaNumeric") ? "AN" : (select_data == "Numeric") ? "NC" : ""; $('.disabled').val(input_data + select_data); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="">select</option> <option value="Binary">Binary</option> <option value="Alpha">Alpha</option> <option value="AlphaNumeric">AlphaNumeric</option> <option value="Numeric">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div> 

Answer 4

You should create an array for that!

 function getcodes() { var input_data = $('.getvalue').val(); var select_data_input = $('.control').val(); var array = ["BY","AA","AN","NC"]; var select_data = array[select_data_input]; $('.disabled').val(input_data + select_data); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="">select</option> <option value="0">Binary</option> <option value="1">Alpha</option> <option value="2">AlphaNumeric</option> <option value="3">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div> 

Answer 5

please try this code.

  function getcodes() { var input_data = $('.getvalue').val(); var select_data = $('.control option:selected').data('code'); (typeof select_data != "undefined") ? $('.disabled').val(input_data + select_data) : ""; } 

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div class="selector"> <div class="get-values"> <input type="text" value="" class="getvalue"> <select class="control"> <option value="">select</option> <option value="Binary" data-code="BY">Binary</option> <option value="Alpha" data-code="AA">Alpha</option> <option value="AlphaNumeric" data-code="AN">AlphaNumeric</option> <option value="Numeric" data-code="NC">Numeric</option> </select> <input type="button" value="getcode" class="getcode" onclick="getcodes()"> <input type="text" value="" class="disabled" disabled> </div> </div>