通过 JS 获取 Select 选项值并设置数组索引

Posted 2023-03-14

【中文标题】通过 JS 获取 Select 选项值并设置数组索引

【英文标题】：Get Select option value via JS & Set Array Index

【发布时间】：2014-09-02 17:25:17

【问题描述】：

我有一个选择元素，我需要检索所选选项的值，然后将数组的索引设置为该值。我需要在页面加载和选择更新时发生这种情况。

它看起来像：

 Form::select('marketplace_id', $donation_options, '', array('data-smart-select', 'required', 'id' => 'marketplace_id')) 

<span id="market_hint" class="help-block"> $marketplaces[0]['example'] </span>

选择 ID 是 marketplace_id

数组是 $marketplaces，它是一个多维数组，第二个值总是 ['example'] 但第一个值是 select 的值，它总是一个数字，例如 0,1,2,3等等。

通过当前的javascript可以检索select的值：

 $( "#marketplace_id" ).val();

但我不确定如何继续更新 market_hint span 标记内的数组。 jQuery有没有简单的方法？

【问题讨论】：

您要么将整个 php 数组输出到 javascript 变量中，要么将其输出到 html 数据属性中，或者在 select 更改时进行 ajax 调用以获取值

您无法更新数组，PHP 已经运行。一旦页面在浏览器中，您就无法对服务器端代码、变量、函数等进行任何操作。当页面在 php 中呈现时，您需要将整个数组放入 javascript 变量中，或者使用 ajax 从服务器轮询新值

【参考方案1】：

如果你想在php渲染页面时将整个数组放入javascript中

?>
<script>
$(function()
   var myData = <?php echo json_encode( $marketplaces ); ?>
   $("#marketplace_id").change(function()
      var value = $(this).val();
      $("#market_hint").html(myData[value]["example"]);
   );
   //do a call here to do an initial setting of the span
   $("#marketplace_id").change();
);
</script>

否则，您将不得不向脚本发出 ajax 请求，该脚本将为您提供数据

$(function()
   $("#marketplace_id").change(function()
      var value = $(this).val();
      $.get("someScript.php?theIndex="+value)
      .done(function(response)
          $("#market_hint").innerHTML = response;
      );
   );
);

someScript.php

<?php
$index = isset($_GET["theIndex"]) ? intval($_GET["theIndex"]) : 0;

//do some processing to get the needed data
//...

echo $data;
die;

当然可以根据你的 laravel 框架进行定制，只是使用普通的 php，因为我不太了解 laravel

【讨论】：

需要改用innerHTHL作为jQuery方法，会报错

感谢您到目前为止的帮助。我唯一的其他问题是如何让 JS 在加载时也显示？现在，您需要为要更新的垃圾邮件选择不同的选择选项。这是现场演示：jsfiddle.net/aQ4vT/1

@MCG，我只是认为您只需为初始跨度文本保留 laravel 模板。如果您希望通过 javascript 显示初始值，您可以在设置事件侦听器后立即添加 $("#marketplace_id").change() 调用。