Fatal编程技术网
  • javascript/
  • Javascript 如何保护选定的g:select？

Javascript 如何保护选定的g:select？

javascript jquery grails

Javascript 如何保护选定的g:select？,javascript,jquery,grails,Javascript,Jquery,Grails,我有一个按钮，该按钮用于添加新的g:select。因此，如果我有一个g:select，那么我单击按钮，它将使用javascript添加一个新的g:select with.clone（） 如果我点击两次按钮，我有3个g：选择 这是我的问题…我如何保护g:select/combobox selected 例如： g：选择“酒店、房子、海滩” 第一个g:select i选择：hotel 第二个g:select i选择：house 第三个g:选择我选择：酒店 所以第一个和第三个是相同的值..当第三个我选

我有一个按钮，该按钮用于添加新的g:select。因此，如果我有一个g:select，那么我单击按钮，它将使用javascript添加一个新的g:select with.clone（）

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

这是我的问题…我如何保护g:select/combobox selected

例如： g：选择“酒店、房子、海滩” 第一个g:select i选择：hotel 第二个g:select i选择：house 第三个g:选择我选择：酒店

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

这是我的代码

    <!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>
我将此javascript用于append

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>


var a=1；
var-temp=1；
函数addSelect（）{
$（“#选择”）.append（$（“#第一选择1”）.clone（）；
温度=温度+1；
a++
}
函数rmvselect（）{
如果（温度！=1）
{
$（“#firstSelect1”）.remove（）；
温度=温度-1；
}
其他的
温度=1
}
$（函数（）{
$（“#namagrup”）.blur（函数（）{
如果（$（此）.length>0）{
var url=“${createLink（控制器：'Grup'，操作：'cekavaiable'）}”
$.getJSON（url，{id:$（this）.val（）}，函数（json）{
如果（！json.available）{
$（“#namagrup”）.css（“边框”，“1px实心红色”）；
警报（“Nama Grup telah dipakai！”）；
$（“#somehiddendiv”）.html（“此ID已被获取”）.show（）；
}
});
}
});
});
$（函数（）{
$（“#firstSelect1”）.blur（函数（）{
var url=“${createLink（控制器：'Grup'，操作：'cekcombobox'）}”
$.getJSON（url，{id:$（this）.val（）}，函数（json）{
如果（！json.available）{
$（“#firstSelect1”）.css（“边框”，“1px实心红色”）；
警报（“asdfasdfasdfsadfsadfsffdsdfi”）；
$（“#somehiddendiv”）.html（“此ID已被获取”）.show（）；
}
});
});
});
${flash.message}
${akiong}

组添加
名称
:
描述
:
使用者

请尝试以下代码：

<%@ 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>


试验
函数cloneSelect（）{
var newSelect=jQuery（“#num”）.clone（）；
$（newSelect.val（“”）；
jQuery（“mkb”）.append（newSelect）；
}
函数testDuplicate（数据）{
var c=$（data.val（）；
console.debug（“num=”+c）；
jQuery（“.num”）.each（函数（）{
如果（此！=数据）{
var a=$（this.val（）；
如果（c==a）{
警告（“重复”）；
$（数据）.val（“”）；
}
}
});
}
无法克隆。。这段代码不起作用，所以我想保护g:select，如果我克隆它。因此，如果第一个g:select，我选择与第二个或第三个相同的值，则会出现警告…（警报）您看到我的JSFIDLE演示了吗？我认为它也在做同样的事情。请尝试
http://jsfiddle.net/mkbharti/V48GS/
你的链接很棒..我从来没见过…这是同样的问题：（但为什么我的编码不起作用…：）(