Question

我的页面上有一个选择标签：

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>

转嫁给：

option [ Value "b"; Selected true ] [ str "b" ]

现在，假设我希望“ b”具有selected属性。我尝试：

option [ Value "b"; Disabled true ] [ str "b" ]

HTML没有任何变化。而如果我例如尝试：

<option value="b" disabled="">b</option>

HTML会相应更改：

<option value="b" selected="">b</option>

那么“ selected”属性怎么办？我需要获取：

Answer 1

如@Foole所建议，您需要使用Value来设置所选项目。

这是一个小代码，可让您了解如何使用它并将其连接到Elmish程序中：

type Model =
    { Selected : string }

type Msg =
    | ChangeValue of string

let init () = { Selected = "option-2" }, Cmd.none

let update (msg:Msg) (model:Model) =
    match msg with
    | ChangeValue newValue ->
        { Selected = newValue }, Cmd.none

let renderItem (key : string) (name : string) =
    option [ Value key ]
        [ str name ]

let view model dispatch =
    select [ // Set the selected key
             Value model.Selected
             // Listen to `OnChange` event to update the `Model`
             OnChange (fun ev ->
                ChangeValue ev.target?value
                |> dispatch
             ) ]
        [ renderItem "option-1" "Apple"
          renderItem "option-2" "Pear"
          renderItem "option-3" "Orange" ]

在@Foole提出的代码中，您无法更改选择，因为Value "b"是静态的，并且您没有更新它。

Answer 2

将其添加为“选择”元素上的值：

   select [ Value "b" ] [
        option [ Value "a" ] [ str "a" ]
        option [ Value "b" ] [ str "b" ]
        option [ Value "c" ] [ str "c" ]
   ]

如何将选定的属性添加到寓言中的选择选项？

2 个答案: