製作一個多選表單

Question

我有這個選擇表單要添加到我的數據庫國家。

https://jsfiddle.net/Da4m3/394/

我想改變這種形式成這樣：

這是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把我所有，這個價值國家[]爲多選，我不知道我在哪裏和如何把這個值。

我已經做了一些修改，我有這樣的代碼，當我從左側選擇正在工作，正在添加到我的數據庫，但是當我將選項推到右側不會添加到數據庫中。

<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); 
});