使用 Javascript 克隆选择选项并将它们存储在隐藏字段中

Question

我有一个包含 3 个选择选项值的表格； airdate_year、airdate_month 和 airdate_day。还有一个名为 episode_airdate[] 的隐藏字段来存储所有 3。这里的问题是表 tr 是使用 javascript 克隆的，因此这些值没有正确发送到 episode-airdate，有什么想法吗？

这是我用来组合 3 个选择值以生成隐藏字段值的脚本。

  <script>
            function datepopulate(){
        var day = document.getElementById('airdate_day').value;
        var month = document.getElementById('airdate_month').value;
        var year = document.getElementById('airdate_year').value;
       var completedate = day+'-'+month+'-'+year;
       document.getElementById('episode_airdate[]').value = completedate;
          alert(document.getElementById('episode_airdate[]').value);
       return true;
    }

    </script>

php

<table id="template" style="display: none;" cellpadding="0px 20px" cellspacing="0px 20px">
    <tr class="line">
        <td width="100%">

        <p>
        <label><?php _e('Season:'); ?></label>
              <?php

                for($i=1; $i<=50; $i++)
                    $season_nums[]=$i;

                echo '<select name="episode_season[]" select id="episode_season[]" class="season regular-text" style="width:50px; float:left; margin-right:10px;">';
                    echo '<option value="">' . __("0" ) . '</option>';
                    foreach($season_nums as $season_num){
                        $selected = '';
                        echo '<option value="' . $season_num . '" ' . $selected . '>' . $season_num . '</option>';
                    }
                echo '</select>';
                ?>
        </p>


        <label><?php _e('Episode:'); ?></label>
        <p>
              <?php

                for($i=1; $i<=50; $i++)
                    $episode_nums[]=$i;

                echo '<select name="episode_number[]" select id="episode_number[]" class="number regular-text" style="width:50px; float:left;">';
                    echo '<option value="">' . __("0" ) . '</option>';
                    foreach($episode_nums as $episode_num){
                        $selected = '';
                        echo '<option value="' . $episode_num . '" ' . $selected . '>' . $episode_num . '</option>';
                    }
                echo '</select>';
                ?>
        </p>

        <label><?php _e('Title:'); ?></label>
        <p>
          <input type="text" name="episode_title[]" id="episode_title[]" value="" class="title regular-text" style="width:400px;" />
        </p>    


        <label><?php _e('Airdate'); ?></label>
        <p>
<script>
        function datepopulate(){
    var day = document.getElementById('airdate_day').value;
    var month = document.getElementById('airdate_month').value;
    var year = document.getElementById('airdate_year').value;
   var completedate = day+'-'+month+'-'+year;
   document.getElementById('episode_airdate[]').value = completedate;
      alert(document.getElementById('episode_airdate[]').value);
   return true;
}

</script>
    <?php

                for($i=1910; $i<=2012; $i++)
                    $years[]=$i;

                echo '<select id="airdate_year" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">';
                    echo '<option value="">' . __("2012" ) . '</option>';
                    foreach($years as $year){
                        $selected = '';
                        echo '<option value="' . $year . '" ' . $selected . '>' . $year . '</option>';
                    }
                echo '</select>';


                for($i=1; $i<=12; $i++)
                    $months[]=$i;

                echo '<select id="airdate_month" onChange="javascript:datepopulate();" style="width:50px; float:left; margin-right:10px;">';
                    echo '<option value="">' . __("0" ) . '</option>';
                    foreach($months as $month){
                        $selected = '';
                        echo '<option value="' . $month . '" ' . $selected . '>' . $month . '</option>';
                    }
                echo '</select>';


                for($i=1; $i<=31; $i++)
                    $days[]=$i;

                echo '<select name="airdate_day" id="airdate_day" onChange="javascript:datepopulate();"  style="width:50px; float:left; margin-right:10px;">';
                    echo '<option value="">' . __("10" ) . '</option>';
                    foreach($days as $day){
                        $selected = '';
                        echo '<option value="' . $day . '" ' . $selected . '>' . $day . '</option>';
                    }
                echo '</select>';
                ?> 
        <input type="hidden" name="episode_airdate[]" id="episode_airdate[]"  class="airdate regular-text" value="">

        </p>

         <p>
        <label><?php _e('Plot:'); ?></label>
          <textarea name="episode_plot[]" id="episode_plot[]" class="plot regular-text"value="" cols="100%" rows="10" tabindex="4" ><?php echo $_POST['episode_season'] ?></textarea>
        </p>
        </td>



        <td width="10%" class="commands">
            <a rel="delete" class="button">-</a> <a rel="add" class="button">+</a>
        </td>
    </tr>
</table>

<table id="attachments" style="border-spacing: 0px 30px;">

</table>


<script>
(function($)
{
    lines = 0;

    function items_init()
    {
        <?php $episodes = get_post_meta($post->ID, 'episodes', true) ?> 

        <?php if ( empty($episodes) ) : ?>                
        items_add();
        <?php else: ?>

        <?php 
        // Get serialized data
        $episodes = unserialize($episodes);

    // Compare episode numbers  
          function compare_number($a, $b) {
    if ($a['season'] == $b['season']) {
        return $b['number'] - $a['number'];    }

    return strnatcmp($b['season'], $a['season']);
  }

  // Sort by episode number 
  usort($episodes, 'compare_number');


        // Show episodes
        foreach ($episodes as $episode) :
         ?>
        items_add({
            title: '<?php echo base64_decode($episode['title']) ?>', 
            airdate:   '<?php echo $episode['airdate'] ?>',
            season:   '<?php echo $episode['season'] ?>',
            number:   '<?php echo $episode['number'] ?>',
            plot:   '<?php echo base64_decode($episode['plot']) ?>',

        });
        <?php endforeach ?>
        <?php endif ?>

        // Delete the "-" button in first row
        $('#attachments tr:first-child .commands a[rel="delete"]').remove();
    }

    function items_add()
    {
        obj = $('#template tr').clone().appendTo('#attachments');
        lines++;

        if (arguments.length > 0) {
            options = arguments[0];

            $('.title', obj).val( options.title );
            $('.airdate',   obj).val( options.airdate );
            $('.season',   obj).val( options.season );
            $('.number',   obj).val( options.number );
            $('.plot',   obj).val( options.plot );
        }
    }

    $('#attachments').delegate('.commands a', 'click', function()
    {
        var action = $(this).attr('rel');
        var confirm_delete = true;

        // Add action
        if ('add' == action) {
            items_add();
        }

        // Delete action
        if ('delete' == action) {
            // La TR en la tabla
            var oTr = $(this).parent().parent();
            var episode_name = $('.title', oTr).val();
            var episode_airdate = $('.airdate', oTr).val();
            var episode_season = $('.season', oTr).val();
            var episode_number  = $('.number', oTr).val();
            var episode_plot  = $('.plot', oTr).val();


            if (episode_name != '' || episode_number != '' || episode_plot != '') {
                if ( !confirm('Are you sure you want to delete ' + episode_name + '?') ) {
                    confirm_delete = false;
                }
            }

            if (confirm_delete) {
                oTr.next().remove(); oTr.remove();
                lines--;
            }
        }
    });

    $(document).ready(function()
    {
        items_init();
    });

})(jQuery);

</script>

Answer 1

由于文档包含多个 episode_airdate[] 元素，您不能使用 document.GetElementById，但可以使用不同的选择器。查看 DOM 的结构，似乎 airdate_year、airdate_month 和 airdate_day 都是目标元素的兄弟。所以在这种情况下，JQuery nextAll 函数应该可以工作：http://api.jquery.com/category/traversing/

$(this).nextAll("#episode_airdate[]").attr('value', completedate);
alert($(this).nextAll("#episode_airdate[]").attr('value'));