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

Question

我有动态 table，因为 table 每行都有一个动态下拉列表。所以每个动态下拉列表都有一个唯一的 id，我必须将这个 id 传递给 onChange 函数。从这个 onChange 函数中，我得到了所选下拉列表的值。请参阅问题了解更多信息。

默认情况下，每个作业都是新作业。如果我将下拉列表从 new Job 更改为 close job，那么我必须将 job new 的状态更改为 close job in data base 并刷新 table，该行将不在 table 中从新工作到结束工作，那么我将如何使用甚至委托

我能够获取下拉列表的 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

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>

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

How to get value of dropdown list from dynamic array?

html

javascript

jquery

drop-down-menu