让我的函数使用附加元素Jquery

时间:2016-03-08 10:21:42

标签: jquery

我有一组输入框,如果单击“添加更多”按钮,则可以添加越来越多的这些表单集。在我的表单中,我可以提交数据,并在重新加载页面时显示它。如果选择框的值为0,我已设法让它发出警告。但这不适用于我附加的选择框。

我用来提醒的jquery是:

function valid() {
        if($j("select option:selected").val() == 0) {

            alert("Nothing is Selected");

        } if($j("select option:selected").val() != 0) {

            alert("Everything Is Selected");
        }
    }

$j("#submit-form").click(function(event){
        valid();
        /* Stops The Button From Submitting */

        event.preventDefault();

        /* Doing Ajax Stuff */
});

当我在表单中添加另一个选择框时,这不会考虑新添加的选择框。如何让这个考虑到页面上的所有选择页面?我已经尝试将我的函数放在文档就绪函数中,或者当我附加选择框时,但这仍然不起作用。

这是我的jsfiddle https://jsfiddle.net/benEdpa/0sLad9t5/19/

2 个答案:

答案 0 :(得分:1)

在演示中使用.each() .class到.each()



 
$('#is-add').on('click',function(){
  var opt = [
    '<option value="0">0</option>',
    '<option value="1">1</option>',
    ].join('');
    
  $('#in-box').append($('<select>',{'class':'sel-class'}).append(opt));
    
});
    
$('#is-submit').on('click',function(){
    var sel_val = []
    $('.sel-class').each(function(){
        sel_val.push($(this).val());
    });

    if(sel_val.indexOf('0') === -1){
      $('h1').html('true go next process');
      return true;
    }else{
      $('h1').html('false select value = "0"');
      return false;
    }
 });
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="in-box">
  <select class="sel-class">
    <option value="0">0</option>
    <option value="1">1</option>
   </select>
  </div><br/>
<a href="#" id="is-add">add</a><br/>
<a href="#" id="is-submit">valid test</a>
<h1></h1>
&#13;
&#13;
&#13;

答案 1 :(得分:1)

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        function valid() {
            if ($("select option:selected").val() == "0") {
                alert("Nothing is Selected");
            } if ($("select option:selected").val() != "0") {
                alert("Everything Is Selected");
            }
        }
        $(document).ready(function () {
            var str = "<select>";
            str += "<option value=\"0\">ALL</option>";
            str += "<option value=\"1\">1</option>  ";
            str += "<option value=\"2\">2</option>  ";
            str += "</select>";
            $('#ddlappend').append(str);
            $("#submit").click(function (event) {
                valid();
                /* Stops The Button From Submitting */
                event.preventDefault();
                /* Doing Ajax Stuff */
            });
        });
    </script>
</head>
<body>
    <div>
        <div id="ddlappend"></div>
        <div>
            <input type="submit" id="submit" value="Submit" />
        </div>
    </div>
</body>
</html>