使用 AJAX 选择下拉菜单选择器时遇到问题

Posted 2023-02-24

【中文标题】使用 AJAX 选择下拉菜单选择器时遇到问题

【英文标题】：Trouble selecting drop-down menu selector using AJAX

【发布时间】：2021-11-19 05:15:08

【问题描述】：

目前，我正在尝试创建一个页面，在该页面中，我的数据库会在放置事件时更新。更具体地说，我有一个具有拖放功能的页面，我需要的是每当我将特定的 div（交易卡）拖放到另一个 div（阶段列）中时，我需要对数据库进行更新，即表示该“交易”置于不同的“阶段”。

对于这个项目，我的后端是 Django，到目前为止，我能够成功更改放置事件的基本 CharFields，尽管在下拉菜单中选择一个选择器让我很困惑。

到目前为止，我只是为目标选择器任意选择“value”= 3，只是为了看看我是否可以让它工作。不幸的是，无论我尝试什么，我总是得到提示说“此字段是必需的”。我在下面附上了一张图片。

任何帮助将不胜感激！

AJAX 代码

$(document).one('drop', function(ev)
            ev.preventDefault();

            var stage_title_path = '#' + el.id + " .stage-title";
            var stage_title = $(stage_title_path).html();
            
            $.ajax(
                type:'POST',
                url:deal_card_url,
                data:
                    deal_owner: 'Sally Sue',
                    deal_address: '745 Amen Street',
                    deal_arv: '222',
                    deal_repair: '333',
                    
                    csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
                ,
                success:function()
                    $("#id_stage").val("3").change();
                
            );

        );
        

表单下拉 HTML

<p><label for="id_stage">Stage:</label> <select name="stage" required="" id="id_stage">
  <option value="">---------</option>

  <option value="1" selected="">New</option>

  <option value="2">Sent Offer</option>

  <option value="3">Under Contract</option>

  <option value="4">Option</option>

  <option value="5">Closed</option>

  <option value="24">New Lead</option>

</select></p>

Ajax Updated Deal Update Webpage:

【问题讨论】：

这一行应该是“on”而不是“one”$(document).one(' ，也就是说，“field required”消息与Ajax无关。要测试是否触发了 Ajax，可以使用console.log('ajax triggered'); 或类似消息。

感谢亚历克斯的评论。我使用“one”而不是“on”的原因是因为使用“on”它会拉起以前的丢弃事件以及最近的丢弃事件。使用“一个”可以做到这一点，因此没有考虑以前的丢弃事件。至于“必填字段”，我知道它没有明确说明是否触发了 Ajax。随着字符域的变化，ajax 显然运行了。我指出所需的字段只是为了显示我选择选择器的代码不起作用，而其他一切都是。希望这能澄清我的问题。

【参考方案1】：

想通了。其实很简单……

对于 ajax 函数中的“数据”设置，我需要指定所需选择器（也称为阶段）的“值”，如下面的代码所示。

data:
     deal_owner: 'Sally Sue',
     deal_address: '745 Amen Street',
     deal_arv: '222',
     deal_repair: '333',
     stage: "2",

在这种情况下，传递一个等于“2”的阶段“值”，如 html 所示，对应于下拉菜单中的“Sent Offer”选项。以前我尝试使用选择器的实际名称（例如 Sent Offer）。