根据用户选择的值的动态数量分配单选按钮的值

Question

用户选择五个选择下拉列表后，我想从字段＆＃34; radio_btn_name＆＃34;中设置单选按钮的值。基于最多3个的用户选择。将每个对象视为＆＃34;规则＆＃34;。如果选择组合符合该规则，请提供＆＃34; radio_btn_x＆＃34; ＆＃34;输出＆＃34;值。

在Part 1我的问题中，当＆＃34; selected_option_names _＆＃34;的数量达到了我想要的结果时等于选择下拉列表的数量。但是，我需要能够仅针对最多3个用户选择检查动态下拉数。

我认为解决方案与第1部分完全不同，因此我觉得有必要提出一个新问题。

JSFiddle

＆＃13;

＆＃13;

    $(document).ready(function() {

// A successful solution would render all these rules true, radio_button_4, 
// radio_button_8 and radio_button_1 would get their respective new values
var objs = [{
  selected_option_name_1: "select_1",
  selected_option_name_2: "",
  selected_option_name_3: "",      
  selected_option_value_1: "1-1",
  selected_option_value_2: "",
  selected_option_value_3: "",
  radio_btn_name: "radio_button_4",
  output: "5000-R"
}, {
  selected_option_name_1: "select_1",
  selected_option_name_2: "select_2",
  selected_option_name_3: "select_5",     
  selected_option_value_1: "1-1",
  selected_option_value_2: "2-2",
  selected_option_value_3: "5-2",
  output: "10000-R",
  radio_btn_name: "radio_button_8"
}, {
  selected_option_name_1: "select_4",
  selected_option_name_2: "",
  selected_option_name_3: "",     
  selected_option_value_1: "4-1",
  selected_option_value_2: "",
  selected_option_value_3: "",
  output: "15000-R",
  radio_btn_name: "radio_button_1"
}];
 // Solution for part 1. Will only work if number of dropdowns == "selected_option_name_"
   $("#submit").on("click", function() {
    $("#wrapper").find("input[type='radio']").each(function(i, o) {
      var btn = $(this);
      var btn_name = $(this).attr("name");
      $.each(objs, function(index, rule) {
        if (btn_name == rule.radio_btn_name) {
          if(rule.selected_option_value_1 == $('#select_1').val()
              && rule.selected_option_value_2 == $('#select_2').val()
              && rule.selected_option_value_3 == $('#select_3').val()) {
            btn.val(rule.output);
            console.log(rule.output);
          }
        }
      });
    });
   });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div>
     <select class="group_1" name="select_1">
      <option value=""></option>
      <option value="1-1">Dropdown 1-1</option>
      <option value="1-2">Dropdown 1-2</option>
      <option value="1-3">Dropdown 1-3</option>
    </select>
   </div>
   <br>
   <div>
    <input type="radio" name="radio_button_1" value="r()">
    <input type="radio" name="radio_button_2" value="o()">
    <input type="radio" name="radio_button_3" value="n()">
  </div>
  <div>
   <select class="group_1" name="select_2">
    <option value=""></option>
    <option value="2-1">Dropdown 2-1</option>
    <option value="2-2">Dropdown 2-2</option>
    <option value="2-3">Dropdown 2-3</option>
  </select>
  </div>
  <br>
  <div>
    <input type="radio" name="radio_button_4" value="r()">
    <input type="radio" name="radio_button_5" value="o()">
    <input type="radio" name="radio_button_6" value="n()">
  </div>
  <div>
    <select class="group_1" name="select_3">
      <option value=""></option>
      <option value="3-1">Dropdown 3-1</option>
      <option value="3-2">Dropdown 3-2</option>
      <option value="3-3">Dropdown 3-3</option>
    </select>
  </div>
  <br>
  <div>
    <input type="radio" name="radio_button_7" value="r()">
    <input type="radio" name="radio_button_8" value="o()">
    <input type="radio" name="radio_button_9" value="n()">
  </div>
  <br>
  <div>
    <select class="group_1" name="select_4">
      <option value=""></option>
      <option value="4-1">Dropdown 4-1</option>
      <option value="4-2">Dropdown 4-2</option>
      <option value="4-3">Dropdown 4-3</option>
    </select>
  </div>
  <br>
  <div>
    <input type="radio" name="radio_button_10" value="r()">
    <input type="radio" name="radio_button_11" value="o()">
    <input type="radio" name="radio_button_12" value="n()">
  </div>
  <br>
  <div>
    <select class="group_1" name="select_5">
      <option value=""></option>
      <option value="5-1">Dropdown 5-1</option>
      <option value="5-2">Dropdown 5-2</option>
      <option value="5-3">Dropdown 5-3</option>
    </select>
  </div>
  <br>
  <button id="submit">Submit</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

事实证明，解决方案并不像我想象的那么遥远。我只需要添加一个隐藏名称等于空字符串的输入类型来解释我的对象中的任何空字符串。

我还更新了我的jQuery，以便从我的帖子的第一部分中找到名称vs id的价值。

更新了fiddle

＆＃13;

＆＃13;

    $(document).ready(function() {

   $("#submit").on("click", function() {
    $("#wrapper").find("input[type='radio']").each(function(i, o) {
      var btn = $(this);
      var btn_name = $(this).attr("name");
      $.each(objs, function(index, rule) {
        if (btn_name == rule.radio_btn_name) {
          if(rule.selected_option_value_1 == $('[name="'+rule.selected_option_name_1 + '"]').val()
              && rule.selected_option_value_2 == $('[name="'+rule.selected_option_name_2 + '"]').val()
              && rule.selected_option_value_3 == $('[name="'+rule.selected_option_name_3 + '"]').val()) {
            btn.val(rule.output);
            console.log(rule.output);
          }
        }
      });
    });
   });
  });

＆＃13;

   
<div>
  <input type="hidden" name="" value="">
  <button id="submit">Submit</button>
</div>

＆＃13;

＆＃13;

＆＃13;