0

更改单选按钮后，我正在使用 jquery 添加选择字段。代码如下所示：

$("<label>For: </label><select><option value='1'>1</option>"+
                            "<option value='2'>2</option>"+
                            "<option value='3'>3</option>"+
                            "<option value='4'>4</option>"+
                            "<option value='5'>5</option>"+
                            "<option value='6'>6</option>"+
                            "<option value='7'>7</option>"+
                            "<option value='8'>8</option>"+
                            "<option value='9'>9</option>"+
                            "<option value='10'>10</option>"+
                            "<option value='11'>11</option>"+
                            "<option value='12'>12</option>"+
                            "</select><label>Weeks</label>")
.attr("id", "duration")
.attr("name", "duration")
.attr("class", "duration")
.appendTo("#durationVal");

我尝试使用数组，但这只是在字段中填充了数组的所有元素的选择。我也尝试过对此使用 for 循环，但这根本没有任何作用。这个想法是，当用户单击重复工作的单选按钮时，下一组单选出现让用户选择每月或每周重复。然后，这会显示我想要的最终选择作为允许 26 周或 6 个月的选择，具体取决于所选的单选按钮。我怎样才能做到这一点，这样我就不必手动添加每个选项？上面的方法有效，但它很难看，而且打字太多。

4

2 回答 2

2

目前，您每次通过循环时都创建一个选项选择框，您想要创建选项而不是循环中的选择

var select = $("<select></select>");
for (i=1;i<53;i++)
{
   select.append( $('<option value="'+i+'">'+i+'</option>') );
}
$("#WhateverElement").append(select);

并且由于您从 1 开始循环，因此您应该使用i<53ori<=52来获得完整的 52 个值

你也有

.attr("id", "durationW")
.attr("class", "duration")
.appendTo("#durationVal");

就在无效的 for 循环块之后，没有任何意义，并且应该抛出某种错误，因为它没有附加到任何对象。

于 2013-09-17T18:21:19.540 回答
0

我无法让 jquery 代码按我的需要工作，所以我使用 php 循环将选择写入我的 html 以填充它们，如下所示：

  <td id="selmn_td"><label>Times: </label>
    <select name="selectMN" id="selectorMN" ><?PHP 
                                            for ($i = 1;$i<13;$i++)
                                             echo "<option value=" . $i . ">" .$i . "</option>";
                                            ?>
    </select></td>
</tr>
<tr>
  <td id="selwk_td"><label>Times: </label>
    <select name="selectWK" id="selector" style="visibility:hidden" ><?PHP 
                                                                for ($i = 1;$i<53;$i++)
                                                                 echo "<option value=" . $i . ">" .$i . "</option>";
                                                                ?>
    </select><label id="weeks"></label><label id="months"></label></td>
  <td>&nbsp;</td>
  <td>&nbsp;</td>
  <td id="weekdays" colspan="2">
        <input type="checkbox" name="weekdays[]" value="Monday" id="weekdays_0" />Mon</label><label>
        <input type="checkbox" name="weekdays[]" value="Tuesday" id="weekdays_1" />Tues</label><label>
        <input type="checkbox" name="weekdays[]" value="Wednesday" id="weekdays_2" />Wed</label><label>
        <input type="checkbox" name="weekdays[]" value="Thursday" id="weekdays_3" />Thu</label><label>
        <input type="checkbox" name="weekdays[]" value="Friday" id="weekdays_4" />Fri</label><label>
        <input type="checkbox" name="weekdays[]" value="Saturday" id="weekdays_5" />Sat</label><label>
        <input type="checkbox" name="weekdays[]" value="Sunday" id="weekdays_6" />Sun</label>
  </td>

然后我使用以下 jquery 来显示和隐藏输入字段：

        $('#RadioGroup1_0').change(function()
        {
            document.getElementById('radio_duration_td').style.visibility="visible";
            document.getElementById('selwk_td').style.visibility="visible";
            document.getElementById('selector').style.visibility="visible";
            document.getElementById('weekdays').style.visibility="visible";

        $('#RadioGroup1_1').change(function()
        {
            document.getElementById('radio_duration_td').style.visibility="hidden";
            document.getElementById('selwk_td').style.visibility="hidden";
            document.getElementById('selector').style.visibility="hidden";
            document.getElementById('weekdays').style.visibility="hidden";
            document.getElementById('selmn_td').style.visibility="hidden";
        }
        );  

        $('#radio_duration_1').change(function()
        {
            document.getElementById('weeks').style.visibility="hidden";
            document.getElementById('weekdays').style.visibility="hidden";
            document.getElementById('selmn_td').style.visibility="visible";
            document.getElementById('selector').style.visibility="hidden";
            document.getElementById('selwk_td').style.visibility="hidden";
            //document.getElementById('selwk_td').style.visibility="visible";
            //document.getElementById('selector').style.visibility="visible";
        }
        );                              
        $('#radio_duration_2').change(function()
        {
            document.getElementById('weekdays').style.visibility="visible";
            document.getElementById('selector').style.visibility="visible";
            document.getElementById('selwk_td').style.visibility="visible";
            document.getElementById('selmn_td').style.visibility="hidden";
            //document.getElementById('months').style.visibility="hidden";
        }

这并不理想，但是当最后期限被推迟时，您必须选择可行的方法。对此的建议仍将不胜感激！

于 2013-09-19T14:15:10.167 回答