如何修复此选择菜单，以便我可以通过 phx-change 访问参数

Question

我只是想在用户做出选择时从下拉菜单中捕获数据。最终，当用户从下拉菜单中选择时，我想在事件监听器中捕获组项目的 ID

我不知道该怎么办。

我希望 IO.inspect(params) 在分配给 HTML 元素中的特定键（例如名称）时显示值。

defmodule AppWeb.GroupLive do
  use AppWeb, :live_view
  alias App.TestBeds
  alias App.Groups


  def mount(_params, _session, socket) do
    {:ok, assign(socket, testbeds: TestBeds.list_testbeds(), groups: Groups.list_groups())}
  end


  def handle_event("select-group", params, socket)  do  

       IO.inspect params

       {:noreply, socket}
  end


  def render(assigns) do
    ~H"""
    <div> TestBed Name</div>

   <%= for testbed <- @testbeds do %>
    <div class="name"><%= testbed.name %></div>
      <h2> Select Group </h2>
      <form phx-change="select-group" >
       <select id="group-selection">
        <%= for group <- @groups do %>
          <option value= {"#{group.name}"} name={"#{group.id}"}><%=group.name %></option>
      <% end %>
       </select>
     </form>
   <% end %>

   <div>
    
   </div>
    """
  end
end



params is this:

  View: AppWeb.GroupLive
  Event: "select-group"
  Parameters: %{"_target" => ["undefined"]}
%{"_target" => ["undefined"]}

我期待类似的事情

  View: AppWeb.GroupLive
  Event: "select-group"
  Parameters: %{"_target" => [name: group-id]}

答案 我已经修复了它，但它仍然不是我所期望的

  <div class="grid grid-columns-2 grid-flow-col gap-4">

         <%= for testbed <- @testbeds do %>
          
      
        <div class="column-1">

          <div class="name"><%= testbed.name %></div>
    
        </div>

        <div class="column-2">    

            <form phx-change="select-group"  >
               <select id="group-selection"  name="name" data="name" >
                <%= for group <- @groups do %>
                  <option value= {"#{group.id}"} ><%=group.name %></option>
                <% end %>
               </select>
            </form>
        </div>

Params 现在为我提供了以 name 属性为 key 的数据，但是如果我想要多条数据怎么办？我需要将它们全部放在同一个字符串中并解析它吗？我认为这是不对的。

  View: AppWeb.GroupLive
  Event: "select-group"
  Parameters: %{"_target" => ["name"], "name" => "4"}
%{"_target" => ["name"], "name" => "4"}
[debug] Replied in 409µs

   

Answer 1

在表单的

phx-change

回调中，您将获得所有命名字段的所有 值，无论是输入还是选择等。就像您提交表单一样。

如果我想要多于一项数据怎么办？

如果您引用有关每个组的更多数据，您并不真正希望它从浏览器返回。将其存储在进程状态中，并在需要时使用 id 来检索它。

另一方面，如果您引用通过附加输入选择的更多数据，您将在参数映射的其他键中找到它。该字段的

name

是您填写值的键。

Answer 2

你必须使用这个：

在我的 github

中观看我的完整示例

 def filter_form(assigns) do
    ~H"""
    <form phx-change="filter">
      <div class="filters">
        <select name="sport">
          <%= Phoenix.HTML.Form.options_for_select(
            sport_options(),
            @filter.sport
          ) %>
        </select>
        <select name="status">
          <%= Phoenix.HTML.Form.options_for_select(
            status_options(),
            @filter.status
          ) %>
        </select>
      </div>
    </form>
    """
  end

  def handle_event("filter", %{"sport" => sport, "status" => status}, socket) do
    filter = %{sport: sport, status: status}

    athletes = Athletes.list_athletes(filter)

    {:noreply, assign(socket, filter: filter, athletes: athletes)}
  end