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

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

javascript jquery

Javascript 根据用户选择的选项设置单选按钮的值,javascript,jquery,Javascript,Jquery,根据用户对三个下拉列表的选择，我想从下面的对象中设置给定单选按钮的值例如，如果我从第一个select标记中选择“Dropdown 1-1”，并将其他两个标记留空，单选按钮4现在的值为“r（5000-r）” 如果我选择“Dropdown 1-1”和“Dropdown 2-2”并将第三个留空，单选按钮_4的值将为“r（10000-r）” 我尝试过嵌套循环的不同变体，但似乎无法找出获得所需结果的正确顺序 $（文档）.ready（函数（）{ 变量objs=[{ 所选选项\u值\u 1:“1-1”，

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

例如，如果我从第一个select标记中选择“Dropdown 1-1”，并将其他两个标记留空，单选按钮4现在的值为“r（5000-r）”

如果我选择“Dropdown 1-1”和“Dropdown 2-2”并将第三个留空，单选按钮_4的值将为“r（10000-r）”

我尝试过嵌套循环的不同变体，但似乎无法找出获得所需结果的正确顺序

$（文档）.ready（函数（）{
变量objs=[{
所选选项\u值\u 1:“1-1”，
所选的_选项_值_2:“”，
所选选项值3:“”，
输出：“5000-R”，
名称_1:“ABC_1”，
名称_2:“”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
所选选项\u值\u 1:“1-1”，
所选选项\u值\u 2:“2-2”，
所选选项值3:“”，
输出：“10000-R”，
名称_1:“ABC_1”，
名称_2:“MNO_2”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
所选选项\u值\u 1:“1-1”，
所选选项\u值\u 2:“2-2”，
所选选项\u值\u 3:“3-3”，
输出：“15000-R”，
名称_1:“ABC_1”，
名称_2:“MNO_2”，
名称_3:“YZ_3”，
单选按钮名称：“单选按钮4”
}];
$（“#提交”）。在（“单击”，函数（）{
$（“#包装器”）.find（“输入[type='radio']”）。每个（函数（i，o）{
var btn_name=$（this.attr（“name”）；
$.each（对象、函数（索引、规则）{
如果（btn\U名称==规则.无线电\U btn\U名称）{
控制台日志（规则）；
}
});
});
});
});

下拉列表1-1
下拉列表1-2
下拉列表1-3


下拉列表2-1
下拉列表2-2
下拉列表2-3


下拉列表3-1
下拉列表3-2
下拉列表3-3




提交
1）我将组添加到您的OBJ中
2） 更改了select中的类组
3） 我改变了你的js调用函数每次一些选择被改变
4） 创建函数，以获取基于所选值的新值，比较所选选项规则


var objs=[{
组：“组1”，
所选选项值1：“1-1”，
所选选项\u值2:“”，
所选选项\u值3:“”，
输出：“5000-R”，
名称_1:“ABC_1”，
名称_2:“”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
组：“组2”，
所选选项值1：“1-1”，
所选选项值2：“2-2”，
所选选项\u值3:“”，
输出：“10000-R”，
名称_1:“ABC_1”，
名称_2:“MNO_2”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
组：“组3”，
所选选项值1：“1-1”，
所选选项值2：“2-2”，
所选选项值3：“3-3”，
输出：“15000-R”，
名称_1:“ABC_1”，
名称_2:“MNO_2”，
名称_3:“YZ_3”，
单选按钮名称：“单选按钮4”
}];
功能更改收音机（btn\u名称、组\u类别）{
$.each（objs，函数（索引，规则）{
如果（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+”））；
返回false；
}否则{
$（“input[name=radio_button_4]”）val（“r（）”）；
}
});
console.log（$（$input[name=radio_button_4]））.val（）；
}
$（文档）.ready（函数（）{
$（“选择”）。关于（“更改”，功能（e）{
var btn_name=$（“选项：选中”，this）.attr（“名称”）；
var group_class=$（this.attr（“class”）；
ChangeRadio（btn\u名称、组\u类别）；
});
$（“#提交”）。在（“单击”，函数（）{
//某物
});
});

请选择
下拉列表1-1
下拉列表1-2
下拉列表1-3


请选择
下拉列表2-1
下拉列表2-2
下拉列表2-3


请选择
下拉列表3-1
下拉列表3-2
下拉列表3-3




提交
达维拉！
我理解您的问题-您希望根据下拉选择和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>


下拉列表1-1
下拉列表1-2
下拉列表1-3


下拉列表2-1
下拉列表2-2
下拉列表2-3


下拉列表3-1
下拉列表3-2
下拉列表3-3




提交
$（文档）.ready（函数（）{
变量objs=[{
所选选项\u值\u 1:“1-1”，
所选的_选项_值_2:“”，
所选选项值3:“”，
输出：“5000-R”，
名称_1:“ABC_1”，
名称_2:“”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
所选选项\u值\u 1:“1-1”，
所选选项\u值\u 2:“2-2”，
所选选项值3:“”，
输出：“10000-R”，
名称_1:“ABC_1”，
名称_2:“MNO_2”，
名称_3:“”，
单选按钮名称：“单选按钮4”
}, {
选择