Question

概念是，为每个添加的项目启用具有单个或多个类别和价格。例如，我添加了项目添加，然后我在下拉框中选择类别并分别在文本框中设置价格。在文本框旁边会有一个链接可以添加更多内容。单击该链接时，应显示另一组类别下拉列表和价格文本框。我该怎么做？

目前我只能多次出现文字框，我不确定如何在点击时重复选择框。请帮忙！感谢。

HTML

   <form action="#" method="POST" class="form-horizontal" role="form">
    <table border="1" style="border-collapse:collapse;" style="margin-left:20px;">
        <tr><td>Addon Name</td><td>:</td><td><input type="text" name="addon"></td></tr>
        <tr><td>Addon Deposit</td><td>:</td><td><input type="text" name="deposit" value=""></td></tr>
        <!-- select sub category optional-->
         <tr><td>Addon Sub category</td><td>:</td>
         <td>
//this is the drop down box that I want to repeat with the textbox(boxes[])
        <select name="sub_cat[]">
        <?php

        while($row_sub=mysql_fetch_array($result_sub))
        {
            ?>
            <option value="<?php echo $row_sub['sub_id'];?>"><?php echo $row_sub['sub_cat_name'];?></option>
            <?php
        }
        ?>

        </select>

                if( !empty( $data ) )
                {
                    foreach( unserialize($data) as $key => $value ) :
                ?>
                    <div class="form-group">

                        <label class="col-sm-2 control-label" for="txtbox<?php echo $key + 1; ?>">Box <span class="label-numbers"><?php echo $key + 1; ?></span></label>
                        <div class="col-sm-10">

                            <input class="form-control" type="text" name="boxes[]" id="txtbox<?php echo $key + 1; ?>" value="<?php echo htmlentities( $value ); ?>" />
                            <?php echo ( 0 == $key ? '<a href="#" class="btn btn-success btn-xs add-txt">Add More</a>' : '<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' ); ?>
                        </div>
                    </div>
                <?php
                    endforeach;
                }
                else
                {
                ?>
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="txtbox1">Price <span class="label-numbers">1</span></label>
                        <div class="col-sm-10">
                            <input class="form-control" type="text" name="boxes[]" id="txtbox1" />
                            <a href="#" class="btn btn-success btn-xs add-txt">Add More</a>
                        </div>
                    </div>
                <?php
                }
                ?>
                    <!--<input style="margin: 0 auto; width: 200px;" class="btn btn-primary btn-block" type="submit" value="Submit" />-->

                     <p><?php
                    if( isset($_POST['boxes']) && is_array($_POST['boxes']) )
                    {
                        if( 5 < count( $_POST['boxes'] ) ) :
                            echo 'Cheating Huh!';
                        else :
                            print 'Serialized String<br>' . htmlentities( serialize( $_POST['boxes'] ) );
                        endif;
                    }
                ?></p>


         </td>
         </tr>
         <tr><td colspan="3">
         <input type="hidden" name="submitted" >
         <input type="submit" name="submit" value="Submit">
         </td></tr>
    </table>
      </form>

脚本

 <script type="text/javascript">
        SyntaxHighlighter.all();
        jQuery(document).ready(function($){
            $("body").css('min-height', $(window).height() + 1 );
            $(window).resize(function(){
                $("body").css('min-height', $(window).height() + 1 );
            });
            $("#toggle_code").click(function(){
                $(".syntaxhighlighter.demo_code").toggleClass( "collapsed", 500, function(){
                    $("#toggle_code").text( ( $("#toggle_code").text() == 'View Code' ) ? 'Hide Code' : 'View Code' );
                    $("#toggle_code").toggleClass( "btn-success btn-danger" );
                });
            });

            //Add More
            $(".form-horizontal .add-txt").click(function(){
                var no = $(".form-group").length + 1;
                if( 5 < no ) {
                    alert('Stop it!');
                    return false;
                }
                var more_textbox = $('<div class="form-group">' +
                '<label class="col-sm-2 control-label" for="txtbox' + no + '">Box <span class="label-numbers">' + no + '</span></label>' +
                '<div class="col-sm-10"><input class="form-control" type="text" name="boxes[]" id="txtbox' + no + '" />' +
                '<a href="#" class="btn btn-danger btn-xs remove-txt">Remove</a>' +
                '</div></div>');
                more_textbox.hide();
                $(".form-group:last").after(more_textbox);
                more_textbox.fadeIn("slow");
                return false;
            });

            //Remove
            $('.form-horizontal').on('click', '.remove-txt', function(){
                $(this).parent().parent().css( 'background-color', '#FF6C6C' );
                $(this).parent().parent().fadeOut("slow", function() {
                    $(this).parent().parent().css( 'background-color', '#FFFFFF' );
                    $(this).remove();
                    $('.label-numbers').each(function( index ){
                        $(this).text( index + 1 );
                    });
                });
                return false;
            });
        });
    </script>

Answer 1

我不确定我是否完全按照你的要求，但你在这里使用的技术：

var more_textbox = $('<div class="form-group">' ...

也适用于选择，例如：

var more_select = $('<select ...>');

然后您可以使用append来构建选项，如下所示：

more_select.append( $('<option>')
                                .attr('value', 'blort')
                                .text('blort blargh bleah!')
                   );

单击时如何使下拉框和文本框显示添加更多

1 个答案: