根据用户选择的选项设置单选按钮的值 [英] Set value of radio button based on user selected options

问题描述

基于用户对三个下拉菜单的选择，我想从下面的对象中设置给定单选按钮的值.

Based on a users selections of the three dropdowns, I want to set the value of a given radio button from the objects below.

例如，如果我从第一个选择标签中选择了"Dropdown 1-1"，并将其他两个留空，则radio_button_4的值将为"r(5000-R)".

For example, if I chose "Dropdown 1-1" from the first select tag and left the other two blank, radio_button_4 would now have a value of "r(5000-R)".

如果我选择了"Dropdown 1-1"和"Dropdown 2-2"并留下第三个空白，则radio_button_4的值将显示为"r(10000-R)".

If I chose "Dropdown 1-1" and "Dropdown 2-2" and left the third blank, the value for radio_button_4 would read "r(10000-R)".

我尝试了嵌套循环的不同变体，但似乎无法弄清楚获得所需结果的正确顺序.

I've tried different variations of nested loops but can't seem to figure out the correct order to get my desired result.

    $(document).ready(function() {

    var objs = [{
      selected_option_value_1: "1-1",
      selected_option_value_2: "",
      selected_option_value_3: "",
      output: "5000-R",
      name_1: "ABC_1",
      name_2: "",
      name_3: "",
      radio_btn_name: "radio_button_4"
    }, {
      selected_option_value_1: "1-1",
      selected_option_value_2: "2-2",
      selected_option_value_3: "",
      output: "10000-R",
      name_1: "ABC_1",
      name_2: "MNO_2",
      name_3: "",
      radio_btn_name: "radio_button_4"
    }, {
      selected_option_value_1: "1-1",
      selected_option_value_2: "2-2",
      selected_option_value_3: "3-3",
      output: "15000-R",
      name_1: "ABC_1",
      name_2: "MNO_2",
      name_3: "YZ_3",
      radio_btn_name: "radio_button_4"
    }];

       $("#submit").on("click", function() {
        $("#wrapper").find("input[type='radio']").each(function(i, o) {
          var btn_name = $(this).attr("name");
          $.each(objs, function(index, rule) {
            if (btn_name == rule.radio_btn_name) {
              console.log(rule);
            }
          });
        });
       });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
        <div>
         <select class="group_1">
          <option value=""></option>
          <option value="1-1" name="ABC_1">Dropdown 1-1</option>
          <option value="1-2" name="DEF_2">Dropdown 1-2</option>
          <option value="1-3" name="GHI_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">
        <option value=""></option>
        <option value="2-1" name="JKL_1">Dropdown 2-1</option>
        <option value="2-2" name="MNO_2">Dropdown 2-2</option>
        <option value="2-3" name="PQR_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">
          <option value=""></option>
          <option value="3-1" name="STU_1">Dropdown 3-1</option>
          <option value="3-2" name="VWX_2">Dropdown 3-2</option>
          <option value="3-3" name="YZ_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>
      <button id="submit">Submit</button>
    </div>

JSFiddle

推荐答案

davila！ 据我了解，您的问题-您想根据下拉菜单选择和objs规则为单选按钮动态分配一个值.

davila! As I understand your problem - you want to dynamically assign your radio button a value based of dropdown selection and your objs rules.

您似乎非常接近解决方案.希望以下代码有助于您了解所缺少的内容.

You seem very close to the solution. I hope the below code will help to understand what you are missing.

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div>
     <select class="group_1" id="select_1">
      <option value=""></option>
      <option value="1-1" name="ABC_1">Dropdown 1-1</option>
      <option value="1-2" name="DEF_2">Dropdown 1-2</option>
      <option value="1-3" name="GHI_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" id="select_2">
    <option value=""></option>
    <option value="2-1" name="JKL_1">Dropdown 2-1</option>
    <option value="2-2" name="MNO_2">Dropdown 2-2</option>
    <option value="2-3" name="PQR_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" id="select_3">
      <option value=""></option>
      <option value="3-1" name="STU_1">Dropdown 3-1</option>
      <option value="3-2" name="VWX_2">Dropdown 3-2</option>
      <option value="3-3" name="YZ_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>
  <button id="submit">Submit</button>
</div>

<script>
     $(document).ready(function() {

    var objs = [{
      selected_option_value_1: "1-1",
      selected_option_value_2: "",
      selected_option_value_3: "",
      output: "5000-R",
      name_1: "ABC_1",
      name_2: "",
      name_3: "",
      radio_btn_name: "radio_button_4"
    }, {
      selected_option_value_1: "1-1",
      selected_option_value_2: "2-2",
      selected_option_value_3: "",
      output: "10000-R",
      name_1: "ABC_1",
      name_2: "MNO_2",
      name_3: "",
      radio_btn_name: "radio_button_4"
    }, {
      selected_option_value_1: "1-1",
      selected_option_value_2: "2-2",
      selected_option_value_3: "3-3",
      output: "15000-R",
      name_1: "ABC_1",
      name_2: "MNO_2",
      name_3: "YZ_3",
      radio_btn_name: "radio_button_4"
    }];

       $("#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);
              }
            }
          });
        });
       });
      });
</script>
</body>
</html>

这篇关于根据用户选择的选项设置单选按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！