jQuery從下拉列表中選擇值不起作用

Question

我正在嘗試從下拉列表中獲取值，但是我僅從第一下拉列表中獲取值。 數據庫中有多個記錄，每條記錄都有一個下拉菜單，其中提到了產品的狀態。

我得到的只是第一行下拉菜單的值。 這是我的代碼：

jQuery代碼

$(".myBtn").click(function(){  
    var id=$(this).attr("atr");  
    var text = $(".hotel[myid='tayyab']").val();

    alert(text);

    $.ajax({
        type: "POST",
        url: 'updatestatus.php',
        data: {id:id,status:text},
        success: function(data){
            $("#results").html(data);
        }
    });
});

這是我的PHP代碼

<?php if(isset($_POST['search'])){
    $con=mysql_connect("localhost","root","");
    $db=mysql_select_db("eshop");
    $id=$_POST['pid'];
    $query=mysql_query("SELECT * FROM userorder WHERE id LIKE '$id%'");

    while($res=mysql_fetch_array($query)){
        $id=$res["id"];
    ?>

    <table class="table table-condensed">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><?php echo $res["id"];?></td>
                <td><?php echo $res["name"];?></td>
                <td><?php echo $res["productname"];?></td>
                <td>
                    <select class="hotel" myid="tayyab" name="ostatus">
                        <option value="cancel">Cancel</option>
                        <option value="underp">underp</option>
                        <option value="deliver">deliver</option>
                    </select>
                    <button atr="<?php echo $id; ?>" class="myBtn">Change Status</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

我得到的只是第一行下拉菜單的值。

因為那是

var text = $(".hotel[myid='tayyab']").val();

說要做。 您正在全局搜索.hotel[myid='tayyab'] ，然后使用val獲取第一個匹配項的值。

相反，您要查找包含已按下的特定按鈕的tr ，然后在該tr搜索.hotel[myid='tayyab'] ：

var text = $(this).closest("tr").find(".hotel[myid='tayyab']").val();

---

注意：自定義屬性應始終以data-前綴開頭，例如data-myid ，而不是myid 。

Answer 2

您可以根據ID為每個下拉列表指定唯一的myid ，如下所示：

<select class="hotel" myid="tayyab_<?php echo $id; ?>" name="ostatus">
  <option value="cancel">Cancel</option>
  <option value="underp">underp</option>
  <option value="deliver">deliver</option>
</select>

然后在jQuery中：

$(".myBtn").click(function(){

    var id=$(this).attr("atr");  

    var myId = "tayyab_"+id;
    var text = $(".hotel[myid='" + myId + "']").val();

    alert(text);

    $.ajax({
        type: "POST",
        url: 'updatestatus.php',
        data: {id:id,status:text},
        success: function(data){
            $("#results").html(data);
        }
    }); 
});