Set "option" value of "select" when redirected from page

Question

I have page A, where I have three anchor. And page B, where I have select #days with values 30,180,365

So when I click on page A an anchor with href like page?v=30 I should jump to page B, where automatically would be selected option with value=30 on select #days.

Is it possible? I guess easiest would be using jquery or something.

Thanks!

EDIT: I have following PHP code for showing values.

<select id="days" name="days">
              <?php foreach($prices as $current_days => $details): ?>
                <option value="<?php echo $current_days ?>" <?php selected( $subscription_days, $current_days ); ?>>
                  <?php echo $details['desc']; ?>
                </option>
              <?php endforeach; ?>
            </select>

score 0 · Answer 1 · edited May 23 '17 at 12:10

0

Fetching the Variable is pretty described here: Getting value GET OR POST variable using JavaScript?

Now you only need a Javascript that checks if this Value is set, and then simply manipulates the Select Box. I dont do stuff like that in pure Javascript. jQuery for Example provides verry good functions for this in their API.

edited May 23 '17 at 12:10

Community

1
1

answered Jan 28 '14 at 15:17

Panade

309
3
12

score 0 · Answer 2 · answered Jan 28 '14 at 15:26

You can use something like

function getParameter(paramName) {
  var searchString = window.location.search.substring(1),
      val, params = searchString.split('&');

  for (var i=0; i<params.length; i++) {
    val = params[i].split('=');
    if (val[0] === paramName) {
      return unescape(val[1]);
    }
  }
  return false;
}

var v = getParameter('v');

if (v) {
    $('#days').val(v);
}

score 0 · Answer 3 · answered Jan 28 '14 at 15:28

You can get the parameter from the URL with JavaScript and set the select to the desired value. An example using jQuery would be this one:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript">
    function selectItem() {
      var i = getParam('v');
      $('#days').val(i);
    }
    function getParam(paramName) {
      return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
      );
    }
  </script>
</head>
<body onload="selectItem()">    
  <select id='days'><option value='1'>1</option><option value='2'>2</option></select>
</body>
</html>

score 0 · Accepted Answer · answered Jan 28 '14 at 15:28

0

Taking the function written here for getting the URL vars, all you need is:

$('#days').val($.getUrlVar('v'));

Demo fiddle

Code fiddle

answered Jan 28 '14 at 15:28

Samsquanch

8,866
12
50
89

Hi! Thanks, it's partially working :) I have 'value' loaded by PHP (A progammer did that for me, so I can change the values and it's need for payment) For normal – Mateusz Szuter Jan 29 '14 at 01:39

score 0 · Answer 5 · answered Jan 28 '14 at 15:37

Something like this should work:

<a href="http://server/PageB?value=30">Anchor A</a>
<a href="http://server/PageB?value=180">Anchor B</a>
<a href="http://server/PageB?value=365">Anchor C</a>

And from your Page B you have to put this script:

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}

var valueFromUrl = GetQueryStringParams("value");
$("#your-select-id option").each(function()
{
    this.selected = (this.text() == valueFromUrl);
});

Set "option" value of "select" when redirected from page

5 Answers5