Question

我有一个按钮，按钮用于添加新的g：选择。所以，如果我有一个g：选择然后我点击按钮然后它会添加一个新的g：使用javascript选择.clone（）。

如果我点击按钮两次，我有3克：选择

有我的问题......我怎样才能保护g：select / combobox选择??

示例： g：选择有“酒店，房子，海滩” 第一个g：选择我选择：酒店第二个g：选择我选择：房子第三个g：选择我选择：酒店

所以第一个和第三个是相同的值..当第三个我选择hotel..it将附加一个弹出窗口或警告...用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>

Answer 1

的 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>

如何保护选定的g：选择？

1 个答案: