Блог

Я пытаюсь отобразить значения данных из текстового файла на основе выбора select

 <?php
$lines = file('customers.txt');
?>

<select class="select" style="width: 250px;" name="mylist" id="mylist" required="">
        <option selected="selected" value="">Select Your Company</option>
        <?php foreach($lines as $line){
       $customers = explode(',', $line);
        echo "<option value='".$customers[0]."'>$customers[0] </option>"; }?>
</select>

<input type="text" id="inputid" placeholder="Company Name">
  

и моя попытка js

 <script>
    $(".select").change(function(){
  var res = $(".select").find(":selected").map(function () {
    if($(this).val()!="")
      return $(this).text();
    else
      return "";
   }).get().join("");
  
   $("#inputid").val(res);

 });
</script>
  

Мой customers.txt файл данных:-

Пользователь1, улица, расширение, почтовый индекс

Пользователь2, улица B, расширение B, почтовый индекс B.

Пользователь3, улица C, расширение C, почтовый индекс C

…etc

При выборе Customer1 я хочу отобразить в :-

Customer1
Улица
, расширение
, почтовый индекс

Вам нужно каким-то образом передать данные, которые вы хотите иметь в клиентском коде (js). Прямо сейчас вы встраиваете в html только имя клиента, к которому вы можете получить доступ из js (через значение параметра). Если вы хотите также получить доступ к оставшимся данным, вам нужно передать их. Одним из решений может быть атрибут data html (https://www.w3schools.com/tags/att_data-.asp ), который поддерживается jquery (https://api.jquery.com/data /).

 <?php
$lines = file('customers.txt');
?>

<select class="select" style="width: 250px;" name="mylist" id="mylist" required="">
        <option selected="selected" value="">Select Your Company</option>
        <?php foreach($lines as $line){
       $customers = explode(',', $line);
        echo '<option value="'.$customers[0].'" data-line="'.$line.'">'.$customers[0].'</option>'; }?>
</select>

<input type="text" id="inputid" placeholder="Company Name">

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script>
  $("#mylist").change(function(){
      var line = $(this).find('option:selected').data('line');
    $("#inputid").val(line);
  });
</script>
  

Здесь я добавляю атрибут данных с именем line data-line="'.$line.'" , который содержит целую строку из файла, и добавляю это к каждому тегу option.

Затем в js этот атрибут данных выбранной опции может быть прочитан var line = $(this).find('option:selected').data('line'); .

Если вам нужно больше контролировать то, что доступно из файла, вы можете ввести несколько атрибутов данных с выбранными столбцами из файла или поместить это в виде строки json и прочитать то, что вы хотите в js.

Я думаю, это может сработать для вас?

 <?php
$lines = file('customers.txt');
?>

<select class="select" style="width: 250px;" name="mylist" id="mylist" required="">
  <option selected="selected" value="">Select Your Company</option>
<?php
foreach ($lines as $line_num => $line) {
  $customers = explode(',', $line);
    echo "  <option value='{$customers[0]}' data-street='{$customers[1]}' data-extension='{$customers[2]}' data-zipcode='{$customers[3]}'>{$customers[0]}</option>";
}
?>
</select>

<textarea id="inputid" rows="4" cols="50" placeholder="Company Name"></textarea>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4 XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>
<script>
$("#mylist").change(function() {
  var street = $('select option[value='   this.value   ']').data('street');
  var extension = $('select option[value='   this.value   ']').data('extension');
  var zipcode = $('select option[value='   this.value   ']').data('zipcode');

  $("#inputid").val(street   'n'   extension   'n'   zipcode);
});
</script>