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

Question

我有一个动态表，在那个表中每一行都有一个动态下拉列表。所以每个动态下拉列表都有一个唯一的 ID，我必须将这个 id 传递给 onChange 函数。从这个 onChange 函数中，我得到了所选下拉列表的值。请看this问题以获取更多信息。

默认情况下，每个工作都是新工作。如果我将下拉列表从新作业更改为关闭作业，那么我必须将新作业的状态更改为数据库中的关闭作业并刷新表，该行将不在从新作业更改为关闭作业的表中，那么如何我会使用均匀委托(delegate)

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

,

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.，并删除 onChange='update(this.id)')

$('.data-contacts1-js').on('change', '.input-small', function () {
    console.log($(this).val());
    console.log($(this).attr('id'));
    update($(this).attr('id'));
});

Example