Javascript 我试图根据选择显示txt文件中的数据值

我试图根据选择显示txt文件中的数据值

<?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">

还有我的朋友

<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>

My customers.txt数据文件：-

客户1、街道、分机、邮政编码

客户2号，B街，B分机，B邮政编码

客户3、C街、C分机、C zipcode

…等等

在选择Customer1时，我希望以以下方式显示：-

顾客1 街道 分机

---

zipcode

您需要以某种方式在客户端代码js中传递您想要的数据。现在，您只能在html中嵌入客户名称，您可以通过选项值从js访问该名称。如果您还想访问剩余的数据，则需要传递它。一种解决方案是jquery支持的数据html属性

在这里，我添加了一个名为line data line='.$line'的数据属性，该属性包含文件中的整行内容，并将其添加到每个选项标记中

然后在js中，可以读取所选选项的数据属性var line=$this.find'option:selected.data'line'

---

如果您需要更多地控制文件中的可用内容，您可以使用文件中的选定列引入多个数据属性，或者将其作为json字符串，并在js中读取所需内容。

您需要以某种方式在客户端代码js中传递所需的数据。现在，您只能在html中嵌入客户名称，您可以通过选项值从js访问该名称。如果您还想访问剩余的数据，则需要传递它。一种解决方案是jquery支持的数据html属性

在这里，我添加了一个名为line data line='.$line'的数据属性，该属性包含文件中的整行内容，并将其添加到每个选项标记中

然后在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>

---

我想这可能对你有用

<?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>

---

Thanx less Codeing and works 100%已接受adey_888，但这两种代码都可以使用换行符，而不是一行中的所有内容，在最后一段中有提示，然后接受的答案更合适。你可以这样做：数据行='.$line.'这样做：数据行='.str_replace'，'，PHP_EOL，$line.'所以用新行字符替换逗号。Thanx-less编码和工作100%已经接受adey_888，但这两种代码都可以使用换行符，而不是一行中的所有字符，你在最后一段有一个暗示，然后接受的答案更合适。您可以这样做：数据行='.$line'。执行此操作：数据行='.str_replace'，'，PHP_EOL，$line。。因此，用新行字符替换逗号。