Question

所以我有一个表单输入字段：

<input list="materials" name="material_id" placeholder="Nazwa materiału" autocomplete="off">
    <datalist id="materials">
    @foreach($materials as $material)
    <option value="{{$material->id}}">{{$material->name}}</option>
    @endforeach
    </datalist>

它显示了一个材料（名称）列表，但它对应于material_id（外键），因此它必须发送一个id值，但对于用户来说可能会非常混乱。如何将其设置为发送id值但在字段中留下“材料名称”？（我知道它可能来自jscript或jquery，但我对它们一无所知）

Answer 1

你需要像这样使用onchange事件

$('select').on('change', function() {
  alert( this.value );
  //Do something
})

你的HTML应该是这样的

<select>
    @foreach($materials as $material)
    <option value="{{$material->id}}">{{$material->name}}</option>
    @endforeach
</select>

例如

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript">
            $(document).ready(function() {
                $('select').on('change', function() {
                  alert( this.value );
                })
            });
        </script>
    </head>
    <body>
    //other things
    <select>
        @foreach($materials as $material)
        <option value="{{$material->id}}">{{$material->name}}</option>
        @endforeach
    </select>
    </body>
    </html>

Answer 2

将材料ID存储在数据值上，例如

@foreach($materials as $material)
<option data-value="{{$material->id}}">{{$material->name}}</option>
@endforeach

如何将表单值设置为输入名称但发送ID？

2 个答案: