获取选择选项值更改的行的列的值答案

【问题标题】：Get value of a column of a row where select option value changed获取选择选项值更改的行的列的值
【发布时间】：2017-05-08 11:01:40
【问题描述】：

我正在尝试建模一个网页，该网页允许用户对某些项目进行评分并将这些评分存储在后台。我有一张这样的桌子项目 ID|标题|评级。在评级列中，我有条件地在某些列中选择标签，否则会有一些文本。我在 select 上添加了一个 onchange 事件，该事件在选项值更改时触发了一个 javascript 函数，但我想提取 select 值更改的行的 project_id 字段的值。我是 javascript 的新手，所以我找不到任何可以解决我的问题的东西，我需要那个项目 id 值，因为我需要将该值存储在我的数据库中，我通过 Ajax Calls 让它工作。下面是我的表格：代码：

<?php if($row['status']==='complete' && $result2->num_rows==0 )
            { ?>

                <select id="rating select" onchange="rating()" class="form-control" name="projectrating">
                    <option selected>0</option>
                    <option  value="1" >1</option>
                    <option  value="2">2</option>
                    <option  value="3">3</option>
                    <option  value="4">4</option>
                    <option  value="5">5</option>
                </select>

            <?php } ?> 

                <?php if($row['status']==='complete' && $result2->num_rows > 0 )
            {   $row2=$result2->fetch_assoc();
                $rating=$row2['rating'];
                echo "You have already rated this Project!,You have given the project a rating of $rating";
              } ?>

            <?php
            if($row['status']!=='complete') { ?>
               <?php echo "Ratings only for complete projects" ?>





           <?php } ?>
                  </td>
            <?php } ?>

Javascript:(我需要填充不带值的变量参数，以便使用 Ajax 将其发送到 php 脚本。)

<script>

    function rating()
    {
        var xhttp = new XMLHttpRequest();
         xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if(this.status===400){
        alert("There was a problem while giving the rating");
    }
        if(this.status===200)
        {

            alert("Rating given succesfully");
            window.location.reload(true);


        }

            }
  };   
        xhttp.open("POST", "rating.php", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        var param= 
        xhttp.send(param);

        }

【问题讨论】：

什么是rating()函数？请也显示你的js
发布的javascript

标签： javascript jquery mysql

【解决方案1】：

要达到预期效果，请使用以下选项

选项1：

使用最接近的 tr 和 children，您可以在更改时获得完整的行值
每个单元格都可以通过“eq().text()”获取

Codepen -https://codepen.io/nagasai/pen/YVERRv

JS：

$(document).ready(function(){$('select').on('change',function(){
   var $td= $(this).closest('tr').children('td');
  var project= $td.eq(0).text();
  console.log(project)
})
                            })

选项 2： 使用带有 parentElement 和 childNodes 的纯 JavaScript 并使用 rating() onchange 函数

HTML：

<select  onchange="rating(this)" class="form-control" name="projectrating">

JS：

function rating(a){
  console.log((a.parentElement) .parentElement.childNodes[1].innerHTML)
}

a.parentElement 将给出 td 封闭 select 并且它的 parentElement 是 tr 元素，第一个子 innerHTML 给出第一列值

https://codepen.io/nagasai/pen/qmVQwp

【讨论】：

嗨，这可以在java脚本中完成吗？我对 jQuery 库了解不多。
请检查我的第二个 codepen - codepen.io/nagasai/pen/qmVQwp 使用纯 javascript
很高兴它对您的问题有所帮助。如果对您有帮助，请将其标记为已回答:)
你能告诉我这是如何工作的吗？它绝对精彩。
更新了我的答案。希望对你有帮助:)

【解决方案2】：

首先，你不能为一个元素使用多个 ID

<select id="rating" onchange="rating()" class="form-control" name="projectrating">

那么您应该确定要发送的内容

var paramToSend = document.getElementById("rating").value;

所以你的js会是这样的

function rating(){
var paramToSend = document.getElementById("rating").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState === 4) {
        if(this.status===400){
            alert("There was a problem while giving the rating");
        }
        if(this.status===200){
            alert("Rating given succesfully");
            //window.location.reload(true);
        }

    }
};   
xhttp.open("POST", "rating.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var param="postedParam=" + paramToSend ;    
xhttp.send(param); }

所以在你的 rating.php 中你会得到 $_POST['postedParam']

【讨论】：