2013-10-02 65 views
1

我有一個按鈕,其中按鈕用於添加新的g:select。所以,如果我有一個g:select然後我點擊按鈕,然後它會添加一個新的g:使用javascript .clone()選擇。如何保護選中的g:select?

如果我點擊兩次我有3克按鈕:選擇

有我的問題...我怎麼能保護G:選擇/組合框中選擇?

例如: 的克:選擇具有「酒店,住宅,海灘」 第一個G:選擇我選擇:酒店 第二克:選擇我選擇:房子 第三克:選擇我選擇:酒店

所以第一個和第三個是相同的值..當第三個我選擇酒店..它會追加彈出或警告...與JavaScript .. 我該怎麼辦呢?

有我的編碼

我用這個JavaScript進行追加

var temp = 1; 
     function addSelect(){ 
      $("#selects").append($("#firstSelect1").clone()); 
      temp=temp+1; 
     } 

,這是我的G:選擇

<div class="hello" id="selects"><div id="firstSelect1"><g:select name="user.id" 
       from="${userdetailsList}" optionKey="id" optionValue="${{it.firstName + ' ' + it.lastName }}" 
       noSelection="['':'User']" /> </div></div> 

這是我所有的編碼

<!DOCTYPE html> 
<html> 
    <head> 
    <g:javascript src="jquery.js"/> 
<%-- <g:javascript src="myscript.js" />--%> 
<%-- <g:javascript library="scriptaculous" />--%> 
     <meta name="layout" content="main"> 
     <g:set var="entityName" value="${message(code: 'CurrencyList.label', default: 'CurrencyList')}" /> 
     <title><g:message code="default.list.label" args="[entityName]" /></title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script type="text/javascript"> 
     var a= 1; 
     var temp = 1; 
     function addSelect(){ 
      $("#selects").append($("#firstSelect1").clone()); 
      temp=temp+1; 
      a++ 
     } 
     function rmvselect(){   
      if (temp != 1) 
      { 
       $("#firstSelect1").remove(); 
       temp = temp -1; 
      } 
      else 
       temp = 1 
     } 

     $(function(){ 
       $("#namagrup").blur(function(){ 
       if($(this).length > 0) { 
        var url = "${createLink(controller:'Grup', action:'cekavaiable')}" 
        $.getJSON(url, {id:$(this).val()}, function(json){ 
        if(!json.available) { 
         $("#namagrup").css("border", "1px solid red"); 
         alert("Nama Grup telah dipakai!"); 
         $("#somehiddendiv").html("This ID is already taken").show(); 
        } 
        }); 
       } 
       }); 
      }); 

     $(function(){ 
       $("#firstSelect1").blur(function(){ 

        var url = "${createLink(controller:'Grup', action:'cekcombobox')}" 
        $.getJSON(url, {id:$(this).val()}, function(json){ 
        if(!json.available) { 
         $("#firstSelect1").css("border", "1px solid red"); 
         alert("asdfasdfasdfsadfsfdsdfi"); 
         $("#somehiddendiv").html("This ID is already taken").show(); 
        } 
        }); 

       }); 
      }); 

     </script> 

    </head> 
    <body> 

    <g:if test="${flash.message}"> 
     <div id="userMessage" class="info" style="color:orange;background-color:#d0e4fe;">${flash.message}</div> 
    </g:if> 

<g:form action="simpan">  
    <table align="left"> 
    <p>${akiong}</p> 
    <tbody> 
     <tr> 
      <td style="font-size:20px;" colspan="3"><b>Group Add</b></td> 
     </tr> 
     <tr> 
      <td width="70">Name</td> 
      <td width="5">:</td> 
      <td><g:textField name="namagrup" id="namagrup" value="${namagrup}" /></td> 
     </tr> 
     <tr> 
      <td>Description</td> 
      <td>:</td> 
      <td><g:textArea name="deskripsigrup" value="${deskripsigrup}" rows="5" cols="40"/></td> 
     </tr> 
     <tr></tr> 

    </tbody>  
</table> 

     <ol> 
     <h3 >User</h3> 
     <br>  
     <div class="hello" id="selects"><div id="firstSelect1"><g:select name="user.id" 
        from="${userdetailsList}" optionKey="id" optionValue="${{it.firstName + ' ' + it.lastName }}" 
        noSelection="['':'User']" /> </div></div> 

<%--   <select name="namacombobox">--%> 
<%--    <option value="value1">${userdetailsList?.firstName}</option>    --%> 
<%--   </select>--%> 

     <div><input type="button" onclick="addSelect()" value="ADD" /> 
     <input type="button" onclick="rmvselect()"value="X"/> </div> 
     <br> 
<%--  <g:actionSubmit action="simpan" value="SIMPAN" name="simpan"/>--%> 
      <g:submitButton name="simpangrup" value="SAVE" /> 
     </ol> 


    </g:form> 
    </body> 
</html> 

回答

0

DEMO FIDDLE

嘗試下面的代碼:

<%@ page contentType="text/html;charset=UTF-8" %> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript"> 
    function cloneSelect() { 
     var newSelect = jQuery("#num").clone(); 
     $(newSelect).val(''); 
     jQuery("#mkb").append(newSelect); 
    } 

    function testDuplicate(data) { 
     var c = $(data).val(); 
     console.debug("num = " + c); 
     jQuery(".num").each(function() { 
      if (this != data) { 
       var a = $(this).val(); 
       if (c == a) { 
        alert("Duplicate"); 
        $(data).val(''); 
       } 
      } 
     }); 
    } 
    </script> 
    </head> 

<body> 
    <div id="mkb"> 
    <g:select name="num" from="${1..5}" id="num" class="num" onchange="testDuplicate(this)" noSelection="['': '-Select-']"/> 
    </div> 
    <a href="javascript:void(0)" onclick="cloneSelect()">Clone</a> 
</body> 
</html> 
+0

不能克隆.. Clone這個代碼狀態並沒有工作 – akiong

+0

請看到我的編輯發佈......還有就是我的所有編碼:d – akiong

+0

洙我想保護g:選擇是否克隆它..如果第一個g:選擇我選擇與第二個或第三個相同的值,則會出現警告......(警報) – akiong