Question

根据用户对三个下拉列表的选择，我想从下面的对象中设置给定单选按钮的值。

例如，如果我选择＆＃34; Dropdown 1-1＆＃34;从第一个选择标记开始，另外两个空白，radio_button_4现在的值为＆＃34; r（5000-R）＆＃34;。

如果我选择＆＃34; Dropdown 1-1＆＃34;和＆＃34;下拉2-2＆＃34;并留下第三个空白，radio_button_4的值将读取＆＃34; r（10000-R）＆＃34;。

我尝试了不同的嵌套循环变体，但似乎无法找出正确的顺序来获得我想要的结果。

＆＃13;

    $(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);
            }
          });
        });
       });
      });

＆＃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">
          <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>

＆＃13;

JSFiddle

Answer 1

1）我将组添加到你的objs;

2）在select's中更改了班级组;

3）每次更改某些选项时，我都会将您的js更改为调用函数;

4）创建函数以基于所选值比较selected_option_rule来获取新值。

https://jsfiddle.net/shjgj2s2/5/

var objs = [{
    		group: "group_1",
        selected_option_value1: "1-1",
        selected_option_value2: "",
        selected_option_value3: "",
        output: "5000-R",
        name_1: "ABC_1",
        name_2: "",
        name_3: "",
        radio_btn_name: "radio_button_4"
      }, {
      	group: "group_2",
        selected_option_value1: "1-1",
        selected_option_value2: "2-2",
        selected_option_value3: "",
        output: "10000-R",
        name_1: "ABC_1",
        name_2: "MNO_2",
        name_3: "",
        radio_btn_name: "radio_button_4"
      }, {
      	group: "group_3",
        selected_option_value1: "1-1",
        selected_option_value2: "2-2",
        selected_option_value3: "3-3",
        output: "15000-R",
        name_1: "ABC_1",
        name_2: "MNO_2",
        name_3: "YZ_3",
        radio_btn_name: "radio_button_4"
      }];
      
    function ChangeRadio(btn_name, group_class){
      	$.each(objs, function(index, rule) {   

          		if(rule.selected_option_value1 == $('.group_1').val()
                  && rule.selected_option_value2 == $('.group_2').val()
                  && rule.selected_option_value3 == $('.group_3').val()) {
                $("input[name=" + rule.radio_btn_name +"]").val("r(" + rule.output + ")");
                return false;
              }else{
								$("input[name=radio_button_4]").val("r()");
              }
        });
        console.log($("input[name=radio_button_4]").val());
    }
      
    $(document).ready(function() {
      
      $("select").on("change", function(e){
    			var btn_name =	$("option:selected", this).attr("name");
          var group_class = $(this).attr("class");
          ChangeRadio(btn_name, group_class);
      });

      $("#submit").on("click", function() {
    			//somenthing
      });

    });

<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="">Please make a selection</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_2">
      <option value="">Please make a selection</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_3">
      <option value="">Please make a selection</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>

Answer 2

达维拉！据我了解您的问题 - 您希望根据下拉列表选择和objs规则为您的单选按钮动态分配值。

您似乎非常接近解决方案。我希望下面的代码有助于理解你缺少的东西。

<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>

根据用户选择的选项设置单选按钮的值

2 个答案: