How to get value of dropdown list from dynamic array?

Question

I have dynamic table, in that table every row has a dynamic dropdown list. So every dynamic dropdown list have a unique id, I have to pass this id to the onChange function. And from this onChange function I have get the value of selected dropdown list. Please see this question for more info.

ByDefault every job is New Job. If I change the dropdrown list from new Job to close job, then I have to change the status of job new to close job in data base and refresh table, that row will be not in table which change from new to close job, So How I will do using even delegation

I am able to get the id of dropdown list But when I use var value=$('#id').va; It gives undefined. So how to get the value of selected drop down list.

,

Java Script

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

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

Server code

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

Follow this below sample, its working fine for me.

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

Answer 2

Use it. i think this is helpful for you

<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

If you use jQuery you don't need use inline events like onChange, you should use event delegation, like so (add this code to .ready., and remove 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