无法根据所选数据列表选项自动填充文本区域

Question

我想根据输入字段中客户端名称的输入，在文本区域中自动填充客户端地址。我做了一个"for循环"来获取客户端名称的数据列表。对于地址，我使用javascript获取了所选选项的"id"，这样我就可以使用它来获取所选客户端名称的地址，并将其放入"id"中$索引"；部分"$客户端数据[$index]['client_city_town"]。

现在我怎么能把"；clientid"；在php的"$索引"；这样我就可以在选项选择时自动填充文本区域。如果有其他解决方案，请提出建议。

我的代码：

HTML:

<div class="col-md-4">
<p>
<span class="text-dark" style="font-weight: 500"> To : </span>
<br>
<input type="text" id="clientName" list="clients-list" size="40" required="required">
@if( !empty( $client_data ) )
<datalist id="clients-list">
@for($i=0; $i < count($client_data); $i++)
<option value="{{$client_data[$i]['client_name']}}" id="{{$client_data[$i]['id']}}"></option>
@endfor
</datalist>
@endif
<br>
<textarea type="text" id="clientAddress"> {{$client_data[$index]['client_city_town']}}</textarea>
</p>

</div>

Javascript：

<script>
$('#clientName').on('change', function() {
var clientname = $(this).val();
var clientid = $('#clients-list option[value=' + clientname +']').attr('id');
});

使用的数组($client_data(：

Array
(
[0] => Array
(
[id] => 1
[client_name] => John Doe
[client_shop_street] => Baker Street
[client_city_town] => California
[client_pincode] => 
[client_desc] => hello1
[client_contact1] => 1234567890
[client_contact2] => 1111111111
[client_email] => 
[client_total_amt] => 45000
[client_paid_amt] => 37000
[created_at] => 
[updated_at] => 2021-06-21 18:39:54
[created_by] => 1
)
[1] => Array
(
[id] => 2
[client_name] =>  Tom Jerry
[client_shop_street] => Wall Street
[client_city_town] => New York
[client_pincode] => 
[client_desc] => testing demo
[client_contact1] => 2222222222
[client_contact2] => 3333333333
[client_email] => 
[client_total_amt] => 45000
[client_paid_amt] => 37000
[created_at] => 
[updated_at] => 2021-06-21 23:32:12
[created_by] => 1
)
)

Answer 1

您可以简单地使用.val((方法将数据添加到textarea。类似以下内容：-

$(function() {

let textForTextArea = '';

$('#ice-cream-choice').on('change', (e) => {
e.preventDefault()
textForTextArea = `${textForTextArea} ${e.target.value}`
$('#all-that-is-selected').val(textForTextArea)
})

})

label , input {
display : block;
margin-bottom: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate">
<option value="Coconut">
<option value="Mint">
<option value="Strawberry">
<option value="Vanilla">
</datalist>
<textarea name="" id="all-that-is-selected" cols="30" rows="10"></textarea>