Question

我有动态表，在该表中每行都有一个动态下拉列表。因此，每个动态下拉列表都有唯一的ID，我必须将此id传递给onChange函数。从这个onChange函数我得到选定下拉列表的值。有关详细信息，请参阅this问题。

ByDefault每个工作都是新工作。如果我将dropdrown列表从新Job更改为close job，那么我必须将job new的状态更改为关闭数据库和刷新表中的job，该行将不在表中从new更改为close job，那么How我会使用甚至委托

我能够获得下拉列表的ID但是当我使用 var value=$('#id').va; 时它会给出未定义的内容。那么如何获取所选下拉列表的值。

check dynamic table ，

Java脚本

<script>
        function fetchData1(){                           
            $(".data-contacts1-js tbody").empty();
               $.get("http://localhost/service/Services.php", function(data) {
               var obj=JSON.parse(data);                   
               for(var i in data){
                 var tr=$("<tr></tr>");
                 tr.append(
                        "<td>" + obj[i].b_id + "</td>" +
                        "<td>" + obj[i].cust_name + "</td>" +                           
                        "<td>" + obj[i].cust_mobile + "</td>" +                           
                        "<td>" + obj[i].cust_email + "</td>");
                         tr.append(
                         "<select  id="+obj[i].b_id+" class='input-small'><option value="+1+">New Job</option><option value="+2+">WIP Job</option><option value="+3+">Close Job</option></select>");
                         $(".data-contacts1-js tbody").append(tr);
                         i++;
               }
            });
        }  

        $(document).ready(function(){
              $(".data-contacts1-js tbody").empty();
              $('.data-contacts1-js').on('change', '.input-small', function(){
                    update(this);
              });
              $('#fetchContacts1').click(function() {
                    fetchData1();
              });
        });
        function update(el){
            $.ajax({
                type:"POST",
                url:"http://localhost/service4homes/updateBooking.php",
                data: { status: $(el).val(), id: $(el).attr('id')},
                success: function(response){

                    alert("success");

                },
                error: function(){
                    alert("fail");
                }
            })
        };
    </script>

HTML代码

<div class="row-fluid">

        <div class="block">
            <div class="navbar navbar-inner block-header">
                <div class="muted pull-left">Carpenter Services</div>
            </div>
            <div class="block-content collapse in">
                <div class="span12">
                     <table class="data-contacts1-js table table-striped" >
                          <thead>
                            <tr>
                                  <th>ID</th>
                                  <th>Customer Name</th>
                                  <th>Customer Mobile</th>
                                  <th>Customer Email</th>                                    
                                  <th>Status</th>
                            </tr>
                          </thead>
                      <tbody>

                      </tbody>
                    </table>                                    
                </div>
                <button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>                          
            </div>
        </div>
        <!-- /block -->
    </div>

服务器代码

 <?php
        header('Access-Control-Allow-Origin: *');//Should work in Cross Domaim ajax Calling request
        mysql_connect("localhost","root","1245");
        mysql_select_db("services");
        $response = array();
        if(isset($_POST['type']))
        {
            $status = $_POST ['status'];              
            $id=$_POST ['id'];  
            $result = mysql_query("UPDATE booking SET sps_id = '$status' WHERE b_id = $id");        
            if($result){
                $response["success"]=1;
                $response["message"]="Product successfully updated.";
                echo json_encode($response);
            } else{
                $response["success"]=0;
                $response["message"]="Product unsuccessfully updated.";
                echo json_encode($response);
            }
        }
        else{
            $response["success"]=0;
            $response["message"]="Required fields is missing.";     
            echo json_encode($response);
        }
    ?>

Answer 1

如果你使用jQuery，你不需要使用onChange之类的内联事件，你应该使用event delegation，就像这样（将此代码添加到.ready。）并删除{ {1}}）

onChange='update(this.id)'

Example

Answer 2

使用它。我认为这对你有帮助

<select  id="select_1" onChange='update(this)' class='input-small'><option value="1">New Job</option><option value="2">WIP Job</option><option value="3">Close Job</option></select>

<select  id="select_2" onChange='update(this)' class='input-small'><option value="4">New Job1</option><option value="5">WIP Job1</option><option value="6">Close Job1</option></select>

Jquery的：

function update(t){
 alert(t.value);
    var a=$(t).attr('id');
    alert(a);
}

Click TO Demo

Answer 3

按照以下示例，它对我来说工作正常。

<html>
<head>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#numbers').change(function(e) {
            var id = $('#numbers :selected').attr('id') // this return the id of selected dropdown
            var value=$('#'+id).val(); // getting the value based on id
            alert('value: '+ value);
        });
    });

</script>
</head>
<body>

    <form>
        <select id="numbers">
           <option value="1" id="01">One</option>
           <option value="2" id="02">Two</option>
           <option value="3" id="03">Three</option>
        </select>           
    </form>
</body>
</html>

如何从动态数组中获取下拉列表的值？

3 个答案: