Question

我在我的数据库国家/地区添加了此选择表单。

我想将此表单更改为：

这是html代码：

<label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="members_create_campaign_form[countrySelectionType]" required="required" value="0" checked="checked" /> All</label>
            <label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="members_create_campaign_form[countrySelectionType]" required="required" value="1" /> Selected</label>
            <div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
                <div style="padding:5px"></div>
                <div class="simplebox cgrid200-left">
                    <p style="text-align:center;"><b>Excluded Countries</b></p>
                    <select size="10" name="excludedcountries" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])" multiple >
                                                                                    <option value='97'>Afghanistan</option>
                                                                                                                <option value='191'>Aland Islands</option>
                                                                                                                <option value='105'>Albania</option>
                                                                                                                <option value='114'>Algeria</option>

                                                                        </select>
                </div>
                <div class="simplebox cgrid40-left">
                    <input class="button-blue" type="button" name="right" value="&gt;&gt;" onclick="moveSelectedOptions(this.form['excludedcountries'],this.form['members_create_campaign_form[countries][]'])"><br/><br/>
                    <input class="button-blue" type="button" name="left" value="&lt;&lt;" onclick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])">
                </div>
                <div class="simplebox cgrid200-left">
                    <p style="text-align:center;"><b>Selected Countries</b></p>
                    <select size="10" id="members_create_campaign_form_countries" name="members_create_campaign_form[countries][]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['members_create_campaign_form[countries][]'],this.form['excludedcountries'])" multiple >
                                            </select>

和这个js：

$(document).ready(function () {
        if ($('#members_create_campaign_form_countrySelectionType_1').is(':checked')) {
            $('#clist_div').show('slow');
        }
        $('#members_create_campaign_form_countrySelectionType_0').click(function () {
            $('#clist_div').hide('slow');
        });
        $('#members_create_campaign_form_countrySelectionType_1').click(function () {
            $('#clist_div').show('slow');
        });

        selectDiff('clist_div', 'members_create_campaign_form_countries');
    });
    function sortSelect(selElem) {
        var tmpAry = new Array();
        for (var i=0;i<selElem.options.length;i++) {
            tmpAry[i] = new Array();
            tmpAry[i][0] = selElem.options[i].text;
            tmpAry[i][1] = selElem.options[i].value;
        }
        tmpAry.sort();
        while (selElem.options.length > 0) {
            selElem.options[0] = null;
        }
        for (var i=0;i<tmpAry.length;i++) {
            var op = new Option(tmpAry[i][0], tmpAry[i][1]);
            selElem.options[i] = op;
        }
        return;
    }

    function SelectAllList(CONTROL){
        for(var i = 0;i < CONTROL.length;i++){
            CONTROL.options[i].selected = true;
        }
    }

    function hasOptions(obj) {
        if (obj!=null && obj.options!=null) {
            return true;
        }

        return false;
    }

    function moveSelectedOptions(from,to) {

        if (!hasOptions(from)) { return; }

        for (var i=0; i<from.options.length; i++) {
            var o = from.options[i];
            if (o.selected) {
                if (!hasOptions(to)) { var index = 0; } else { var index=to.options.length; }
                to.options[index] = new Option( o.text, o.value, false, false);
            }
        }

        // Delete them from original
        for (var i=(from.options.length-1); i>=0; i--) {
            var o = from.options[i];

            if (o.selected) {
                from.options[i] = null;
            }
        }

        if ((arguments.length<3) || (arguments[2]==true)) {
            sortSelect(from);
            sortSelect(to);
        }

        from.selectedIndex = -1;
        to.selectedIndex = -1;
    }

我怎么能这样做？我已经尝试过，但有时候都没有插入我的数据库！

从这个值allTarget到我这一切，并且这个值为国家[]用于多选，我不知道我可以在何处以及如何设置这个值。

我做了一些修改，我有这个代码，当我从左侧选择工作时，正在添加到我的数据库但是当我向右侧推选项时没有添加到数据库中。 < / p>

    <div class="st-form-line">
        <span class="st-labeltext">Countries</span>
        <label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_0" name="www" required="required" value="0" checked="checked" /> All</label>
        <label class="margin-right10"><input type="radio" id="members_create_campaign_form_countrySelectionType_1" name="www" required="required" value="1"/> Selected</label>
        <div id="clist_div" class="simplebox cgrid540-right" style="display:none;">
            <div style="padding:5px"></div>
            <div class="simplebox cgrid200-left">
                <p style="text-align:center;"><b>Excluded Countries</b></p>
                <select size="10" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form['countries[]'],this.form['countries[]'])" multiple >
                                                                               <?php foreach($arrayCountries as $country) {?>
                                                <option value="<?= $country ?>" ><?= $country ?></option>
                                            <?php } ?>

                                                                    </select>
            </div>
            <div class="simplebox cgrid40-left">
                <input class="button-blue" type="button" name="right" value="&gt;&gt;" onclick="moveSelectedOptions(this.form['countries[]'],this.form['countries[]'])"><br/><br/>
                <input class="button-blue" type="button" name="left" value="&lt;&lt;" onclick="moveSelectedOptions(this.form['[countries[]'],this.form['countries[]'])">
            </div>
            <div class="simplebox cgrid200-left">
                <p style="text-align:center;"><b>Selected Countries</b></p>
                <select size="10" id="members_create_campaign_form_countries" name="countries[]" style="width:200px; height:160px;" onDblClick="moveSelectedOptions(this.form ['countries[]'],this.form['countries[]'])" multiple >
                                        </select>
            </div>

        </div>
        <div class="clear"></div>

    </div>

Answer 1

快速编码，但这是您正在寻找的吗？

https://jsfiddle.net/Da4m3/398/

（没有费心去写css）

魔术发生在js代码

中

s = $('#selected');
n = $('#not-selected');
l = $('#left');
r = $('#right');

l.on('click', function() {
    move = s.find('option:checked');
  move.attr('selected', false);
    n.append(move);
});

r.on('click', function() {
    move = n.find('option:checked');
  move.attr('selected', false);
    s.append(move);
});

制作多选表格

1 个答案: