Jquery 将表单 SELECT 更新为新选项

Posted

技术标签:

【中文标题】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 不用担心 - 我很高兴能帮上忙。

以上是关于Jquery 将表单 SELECT 更新为新选项的主要内容,如果未能解决你的问题,请参考以下文章

angular1jquery实现无限表单效果

6angular1jquery实现无限表单效果

jquery怎么实现选中select表单中某个option选项时弹出一个div层说明option中的内容?

vue循环生成的表单,el-select初始化之后再选择其他选项视图不更新。

删除 Select2 Jquery 插件中的默认选择

Laravel - 将 Select2 默认设置为 NULL 而不是第一个选项