根据用户所选值的动态数量分配单选按钮的值 [英] Assign value of radio button based on dynamic number of user selected values
问题描述
用户在五个选择下拉菜单中进行选择后，我想基于用户选择的最多3 来从"radio_btn_name"字段中设置单选按钮的值.将每个对象都视为规则".如果选择的组合与该规则匹配，则为"radio_btn_x"提供输出"值.
After a user makes his/her selections of the five select dropdowns, I want to set the value of a radio button from field "radio_btn_name" based on up to 3 of the users selections. Think of each object as a "rule". If a combination of selections matches that rule, give "radio_btn_x" the "output" value.
在我的第1部分问题:当"selected_option_names_"的数量等于选择下拉列表的数量时，我达到了我想要的结果.但是，我需要能够仅针对最多3 个用户选择检查动态的下拉列表数量.
In Part 1 of my question I achieved my desired result when the number of "selected_option_names_" is equal to the number of select dropdowns. However, I need to be able to check for a dynamic number of dropdowns against only up to 3 user selections.
我认为解决方案将与第1部分完全不同，因此我觉得有必要提出新的问题.
I imagine the solution will be drastically different from part 1, as a result I feel a new question is warranted.
$(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);
}
}
});
});
});
});
<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>
推荐答案
事实证明，解决方案与我想象的相距不远.我只需要添加一个名称等于空字符串的隐藏输入类型，以解决对象中的任何空字符串.
It turns out the solution wasn't as far off as I thought. I just needed to add an input type hidden with name equal to empty string to account for any empty strings in my objects.
我还更新了jQuery，以从我的帖子的第一部分中查找名称与ID的值.
I also updated my jQuery to find the value of names vs id's from part one of my post.
更新了小提琴
$(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);
}
}
});
});
});
});
<div>
<input type="hidden" name="" value="">
<button id="submit">Submit</button>
</div>
这篇关于根据用户所选值的动态数量分配单选按钮的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
