Clone selected dropdown value after page redirect

Question

I'm learning jquery... This is my problem, I need to clone the value selected from web page 1 and redirect webpage1 to webpage2...

I found some codes here and tried to combine them...but the code below only redirects and does not clone dropdown value to webpage2 based on the selected value from webpage1....

function moveTo(optionValue) {
    if(optionValue=="") return false;
        window.location='.htm'+optionValue;
    } 
    var $orginalDiv = $('#container');
    var $clonedDiv = $orginalDiv.clone();

    //get original selects into a jq object
    var $originalSelects = $orginalDiv.find('select');

    $clonedDiv.find('select').each(function(index, item) {

        //set new select to value of old select
        $(item).val( $originalSelects.eq(index).val() );

    });

    $clonedDiv.appendTo('clonedItem')

WebPage1 Dropdown List

<div id="container">
    <p>Priority</p>
    <select name="priority" id="drop1" size="1" onchange="moveTo(this.options[this.selectedIndex].value);">
        <option value="form2.html">Low</option>
        <option value="form2.html">Normal</option>
        <option value="form2.html">High</option>
       <option value="form2.html">Emergency</option>
    </select>
</div>

WebPage2 Dropdown List

<div id='clonedItem'>
    <p>Priority</p>
    <select name="priority" id="drop2" size="1">
        <option value="Low">Low</option>
        <option value="Normal">Normal</option>
        <option value="High">High</option>
        <option value="Emergency">Emergency</option>
    </select>
</div>

Please advise on how to fix this or if there is another way aside from using jquery...Thanks.

I hope it's a typo, but there is javascript missing from your `moveTo`-function ... — empiric, Feb 13 '15 at 14:12
I don't think javascript can store values, and transfer them between pages (refreshing pages). — Victor2748, Feb 13 '15 at 14:18

score 0 · Answer 1 · edited May 23 '17 at 11:49

Since the page refreshes, you can not store variable is js directly. There are different ways to achieve what you want. If i understand correctly, the two selects are the same, so they have the same options. for this, i would say the "GET" parameter is the most usefull. in your redirect function just add the index of selected option as a GET to the redirect URL:

function moveTo(optionValue) {
  if(optionValue=="") return false;
    window.location='http://newURL.com'+"?index="+optionValue;
}

Then you just need a js function on the new page which can filter the GET parameter out of the location:

function parse(val) {
  var result = "Not found", 
  tmp = [];
  location.search.substr(1).split("&").forEach(function (item) {
    tmp = item.split("=");
    if (tmp[0] === val) result = decodeURIComponent(tmp[1]);
  });
  return result;
}

(see this aswer for src)

Then finally call the parse function on pageload on the new page and make the option active:

var index = parse(window.location);
$('#drop2 option').eq(index[0]).addClass('selected');

Clone selected dropdown value after page redirect

1 Answers1