1

我有一个按钮，该按钮用于添加新的 g:select。因此，如果我有 ag:select 然后我单击该按钮，那么它将使用 javascript 使用 .clone() 附加一个新的 g:select。

如果我点击按钮两次，我有 3 g:select

有我的问题...我如何保护选中的 g:select/combobox？

例如：g:select 有 "hotel,house,beach" 第一个 g:select i select :hotel 第二个 g:select i select :house 第三个 g:select i select :hotel

所以第一个和第三个是相同的值..当第三个我选择酒店时..它将附加一个弹出窗口或警告...使用 javascript..我该怎么做？

有我的编码

我用这个 javascript 追加

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

这是我的 g:select

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

1 回答 1

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>
于 2013-10-03T19:34:14.677 回答