Jquery 将表单 SELECT 更新为新选项

Posted 2023-05-09

【中文标题】Jquery 将表单 SELECT 更新为新选项

【英文标题】：Jquery update a form SELECT to a new option

【发布时间】：2020-03-13 07:23:22

【问题描述】：

我正在尝试使用从 Ajax 调用返回的新值更新 SELECT 下拉列表。我可以看到 SELECTed 选项正在更改为“已选择”，但表单字段显示从未更新。在下面的代码中，最后，选项正确更新为已选择，但显示仍然显示“高级”而不是“打开”。任何帮助将不胜感激。

Ajax 调用之前

        <form action="" id="RankingForm" name="RankingForm" method="post">
            <td style="color: white;">
                <select name="Ranking">
                    <option value="4" >Open</option>
                    <option value="3" selected>Advanced</option
                    <option value="2" >Intermediate</option>
                    <option value="1" >Beginner</option>
                </select>
            </td>
        </form>

Jquery 代码

    success: function (data) 
      $('.Ranking option[value=data.RankingID]').attr("selected", "selected");
    ,

JSON 响应

ClimberID: "1", Message: "Ranking updated successfully.", RankingID: "4", Success: "1"

发布 JQuery 函数

        <form action="" id="RankingForm" name="RankingForm" method="post">
            <td style="color: white;">
                <select name="Ranking">
                    <option value="4" selected>Open</option>
                    <option value="3" >Advanced</option>
                    <option value="2" >Intermediate</option>
                    <option value="1" >Beginner</option>
                </select>
            </td>
        </form>

【参考方案1】：

您有几个问题。首先，您的select 没有Ranking 类，这就是它的名称。所以要访问它，你应该使用$('select[name=Ranking]')，而不是$('.Ranking)。其次，要使用 jQuery 设置select 的值，我们只需使用$.val()，而不是尝试设置选项的selected 属性。此演示显示 1 秒后更改的选项...

const update_ranking = function(data) 
  $('select[name=Ranking]').val(data.RankingID);
;

const data = 
  ClimberID: "1",
  Message: "Ranking updated successfully.",
  RankingID: "4",
  Success: "1"
;

setTimeout(update_ranking, 1000, data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="RankingForm" name="RankingForm" method="post">
  <td style="color: white;">
    <select name="Ranking">
      <option value="4">Open</option>
      <option value="3" selected>Advanced</option>
      <option value="2">Intermediate</option>
      <option value="1">Beginner</option>
    </select>
  </td>
</form>

【讨论】：

@CFCeltic 不用担心 - 我很高兴能帮上忙。