我正在创建一个简单的表单,允许用户输入特定报告的频率。他们之前允许用户输入一周中的几天。随着对某些报告的需求发生变化,他们将工作日和月中的日期作为一种选择。现在,我将创建一个界面,以便他们希望用户选择“一周中的几天”,“一天中的几天”和“#39;或者'工作日'通过一个单选按钮,根据他们的选择有不同的下拉选项。
<td>Day:</td> <td> <div class="controls">
<fieldset id="Group1" name="Group1">
<label><input id="Radio1" name="Radio1" type="radio" value="day" />Days of Week<br /></label>
<label><input id="Radio1" name="Radio1" type="radio" value="month_day" />Days of Month<br /></label>
<label><input id="Radio1" name="Radio1" type="radio" value="work_day" />Workday<br /></label>
</fieldset>
</div>
<fieldset id="Group2" name="Group2">
<select class="form-control" id="days" name="newday[]" multiple>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
<option value="01">01</option>
<option value="02">02</option>
.
.
.
<option value="31">31</option>
<option value="wd 1">WD 1</option>
<option value="wd 2">WD 2</option>
.
.
.
<option value="wd 25">WD 25</option>
</select>
</fieldset>
</td>
我想知道哪种方法适合我,例如我是Ajax或jquery的新手。星期一至星期五是显示的选项,如果他们选择了“星期几”,“0 - 31日期,如果&#39;日期&#39;,wd 1 - wd 25,如果&#39;工作日&#39; 。感谢Advance的任何帮助。 :)
答案 0 :(得分:1)
$(function() {
// Group the select's options by the radio they correspond to
var options = {},
radios = $("#Group1 :radio");
options[radios.eq(0).val()] = [];
options[radios.eq(1).val()] = [];
options[radios.eq(2).val()] = [];
$("#Group2 select option").each(function(i, el) {
var e = $(el);
if (i < 7)
options[radios.eq(0).val()].push(e);
else if (i < 10) //38
options[radios.eq(1).val()].push(e);
else
options[radios.eq(2).val()].push(e);
e.remove();
});
// On radio's change, empty the select and append the options that correspond to the selected radio
$("#Group1 :radio").on("change", function() {
$("#Group2 select").empty();
var arr = options[$(this).val()];
for (var i = 0; i < arr.length; i++)
$("#Group2 select").append(arr[i]);
}).filter(":selected").trigger("change");
});
http://jsfiddle.net/paska/85w47nbj/1/
另请注意,您不应该有多个具有相同ID的元素。
答案 1 :(得分:1)
我认为如果您使用jQuery非常简单。在这里查看以下运行代码。只有您需要为所有单选按钮删除相同的ID,否则选择该DOM会更加困难,因为 ID是唯一的,否则很好。
function showSameGroup(target1, target2, el){
if(target1 == el){
$(target2).find("option").show().not("."+el).hide();
}
};
$("#Group1 input[type='radio']").click(function(){
var s1 = $(this).val(), s2 = $("#days");
if(s1 == "day"){
showSameGroup(s1, s2, "day");
}
else if(s1 == "mday"){
showSameGroup(s1, s2, "mday");
}
else{
showSameGroup(s1, s2, "wday");
}
});
&#13;
<td>Day:</td> <td> <div class="controls">
<fieldset id="Group1" name="Group1">
<label><input name="Radio1" type="radio" value="day" />Days of Week<br /></label>
<label><input name="Radio1" type="radio" value="mday" />Days of Month<br /></label>
<label><input name="Radio1" type="radio" value="wday" />Workday<br /></label>
</fieldset>
</div>
<fieldset id="Group2" name="Group2">
<select class="form-control" id="days" name="newday[]" multiple>
<option class="day" value="monday">Monday</option>
<option class="day" value="tuesday">Tuesday</option>
<option class="day" value="wednesday">Wednesday</option>
<option class="day" value="thursday">Thursday</option>
<option class="day" value="friday">Friday</option>
<option class="day" value="saturday">Saturday</option>
<option class="day" value="sunday">Sunday</option>
<option class="mday" value="01">01</option>
<option class="mday" value="02">02</option>
<option class="mday" value="31">31</option>
<option class="wday" value="wd 1">WD 1</option>
<option class="wday" value="wd 2">WD 2</option>
<option class="wday" value="wd 25">WD 25</option>
</select>
</fieldset>
</td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
&#13;
我希望它有效。