JQuery - 随机代码生成器，用于在没有 if 条件的情况下选择选项中的数据

Question

我正在编写使用 jQuery 生成随机代码的代码。它工作正常。但我使用了 if 条件来实现这一点。我需要的是编写没有 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

如果条件，请尝试使用单行

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 3

你应该

为此创建一个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 4

请尝试此代码。

 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>

Answer 5

您可以使用对象。喜欢这个。

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>