文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >根据用户选择的选项设置单选按钮的值

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

Stack Overflow用户
提问于 2017-08-22 00:29:46
回答 2查看 206关注 0票数 2

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

例如，如果我从第一个select标记中选择"Dropdown 1-1“，并保留其他两个为空，则radio_button_4现在的值将为"r(5000-R)”。

如果我选择"Dropdown 1-1“和"Dropdown 2-2”，并将第三个留空，则radio_button_4的值将为"r(10000-R)“。

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

​

代码语言：javascript
复制
    $(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);
            }
          });
        });
       });
      });
代码语言：javascript
复制
<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

jquery
javascript
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-22 02:31:42

戴维拉！我理解你的问题--你想根据下拉选择和你的objs规则动态地给你的单选按钮赋值。

你似乎离解决方案很近了。我希望下面的代码将有助于理解您所遗漏的内容。

代码语言：javascript
复制
<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>
票数 0
EN

Stack Overflow用户

发布于 2017-08-22 01:15:44

1)我会在你的objs中添加群组；

2)更改select中的班组；

3)我把你的js改成了每次select被修改时都调用函数；

4)创建函数，根据比较selected_option_rule的选定值得到新值。

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

​

代码语言：javascript
复制
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
      });

    });
代码语言：javascript
复制
<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>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/45801840

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档