Get Select option value via JS & Set Array Index

Question

I have a select element which I need to retrieve the value of selected option and then set an array's index to that value. I need this to happen on page load and whenever select is updated.

It looks something like:

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

The select ID is marketplace_id

The array is $marketplaces and it's a multi-dimension array with the second value always being ['example'] but the first value being the value of the select which is always a number such as 0,1,2,3,etc.

By current javascript can retrieve the value of the select:

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

But I am not sure how to proceed to update the array inside the market_hint span tag. Is there a simple method with jQuery?

Answer 1

If you want to go the route of putting the whole array into javascript when php renders the page

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

Otherwise you will have to do an ajax request to a script that will give you the data

$(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;

Of course tailor it to fit in with your laravel framework, just used plain php as I do not overly know laravel