jQuery-在沒有if條件的情況下在選擇選項中選擇數據的隨機代碼生成器

Question

我正在編寫使用jQuery生成隨機代碼的代碼。 工作正常。 但是我使用if條件來實現這一目標。 我需要的是在沒有條件的情況下編寫該函數……如何獲得該函數？

  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

如果可以更改選項的值，請使用它，否則-使用數據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

您可以使用對象。 像這樣。

 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

如果有條件，請嘗試單行

 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

您應該為此創建一個array ！

 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

請嘗試此代碼。

  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>