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?

you either have output the whole php array into a javascript variable or output it into html data attributes or make an ajax call to get the value when select is changed — charlietfl
– charlietfl, Commented Jul 12, 2014 at 1:31
you can't update the array, PHP has already ran. You cannot do anything with server side code,variables,functions etc once the page is in the browser. You will need to either put the entire array into a javascript variable when the page is rendered in php or use ajax to poll the new value from the server — Patrick Evans
– Patrick Evans, Commented Jul 12, 2014 at 1:32

Patrick Evans · Accepted Answer · 2014-07-12 02:17:02Z

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

edited Jul 12, 2014 at 2:17

answered Jul 12, 2014 at 1:48

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

charlietfl Over a year ago

need to change using innerHTHL as jQuery method, will throw error

MCG Over a year ago

Thanks for the help so far. My only other questions is how would I get the JS to show on load as well? right now you need to select a different select option for the spam to update. Here is live demo: jsfiddle.net/aQ4vT/1

Patrick Evans Over a year ago

@MCG, I just took it that you would just keep the laravel template in place for the initial span text. If you want the initial value to be shown by javascript you can just add a $("#marketplace_id").change() call right after setting the event listener.

Collectives™ on Stack Overflow

Get Select option value via JS & Set Array Index

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related