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，然后在中搜索.hotel[myid='tayyab'] tr：

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

附注：自定义属性应始终以data- prefix开头，例如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);
        }
    }); 
});

jQuery从下拉列表中选择值不起作用

2 个答案: