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

【问题标题】：Get Select option value via JS & Set Array Index通过 JS 获取 Select 选项值并设置数组索引
【发布时间】：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 从服务器轮询新值

标签： javascript jquery arrays select laravel

【解决方案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() 调用。