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

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 に答える