0

必要に応じて複数の選択ボックスが必要なページがあります。このプラグインを使用して、選択ボックスのスタイルを設定しています。

$('body').on('click', '.add_option.add_title', function() {
    $('.add_title_option').after($('.add_title_option .controls').html());
});

これは、選択ボックスを「複製」してその後に追加する私の JavaScript です。

<div class="add_title_option">
    <div class="control-group">
        <label class="control-label" for="title">Title</label>
        <div class="controls">
            <select id="title" name="title">
                <option></option>
                <option value="1">Option #1</option>
                <option value="2">Option #2</option>
                <option value="3">Option #3</option>
                <option value="4">Option #4</option>
            </select>
            <a href="javascript:false;" class="add_option add_title">
                <img src="<?=base_url();?>assets/img/add_options.png" alt="" />
            </a>
        </div>
        <div class="error" id="title_error"></div>
    </div>
</div>

それ自体は「クローン」しますが、選択は機能しません。

javascriptを介して複数の選択を追加するにはどうすればよいですか?

4

2 に答える 2

1 
$('body').on('click', '.add_option.add_title', function() {
    $('.add_title_option').after($('#title').clone());
});
于 2013-10-09T13:17:52.400 に答える
1

使用する必要があります

$('.add_title_option').after($('.selectContainer select').clone().show());

の代わりに

$('.add_title_option').after($('.add_title_option .controls').html());

それを複製し、表示をなしから表示に設定するには。次に、選択ボックスを次のように変換する必要があります.selectBoxIt()

このプラグインでカスタマイズします。また、ID が重複しないように、選択ボックスから ID を削除しました。コードは次のとおりです。

    <!DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="http://gregfranko.com/jquery.selectBoxIt.js/css/jquery.selectBoxIt.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="http://gregfranko.com/jquery.selectBoxIt.js/js/jquery.selectBoxIt.min.js"></script>

<script>
$(function() {

    $(".titleSelect").selectBoxIt();

    $('body').on('click', '#dublicateButton', function() {
        $('.add_title_option').after($('.selectContainer select').clone().show().selectBoxIt());

    });
});
</script>
</head>
<body>

<div class="add_title_option">
    <div class="control-group">
        <label class="control-label" for="title">Title</label>
        <div class="controls">
            <div class="selectContainer" >
                <select class="titleSelect" name="title">
                    <option></option>
                    <option value="1">Option #1</option>
                    <option value="2">Option #2</option>
                    <option value="3">Option #3</option>
                    <option value="4">Option #4</option>
                </select>
            </div>
            <a href="javascript:void(null);" id="dublicateButton" class="add_option add_title">
                click
            </a>
        </div>
        <div class="error" id="title_error"></div>
    </div>
</div>

</body>
</html>
于 2013-10-09T14:01:26.183 に答える