Highlight selected item in javascript

Question

I am trying to open one web page from other with the selected list item. It works but the list is not scroll down and starts with first item.

First page.html

<!DOCTYPE html>
<html>
<body>

<div id="result"></div>

<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
  // Store
  localStorage.setItem("imname", "LB_1_000566");
  // Retrieve
  document.getElementById("result").innerHTML = localStorage.getItem("imname");
} else {
  document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
window.open("s2.html");
</script>

</body>
</html>

second page.html

<!DOCTYPE html>
<html>
<body>

<select id="ImSelect"  size="4" >
  <option value="LB_1_000561">LB_1_000561</option>
  <option value="LB_1_000562">LB_1_000562</option>
  <option value="LB_1_000563">LB_1_000563</option>
  <option value="LB_1_000564">LB_1_000564</option>
  <option value="LB_1_000565">LB_1_000565</option>
  <option value="LB_1_000566">LB_1_000566</option>
  <option value="LB_1_000567">LB_1_000567</option>
  <option value="LB_1_000568">LB_1_000568</option>
  <option value="LB_1_000569">LB_1_000569</option>
  <option value="LB_1_000570">LB_1_000570</option>
  <option value="LB_1_000571">LB_1_000571</option>
  <option value="LB_1_000572">LB_1_000572</option>
  <option value="LB_1_000573">LB_1_000573</option>  
</select>

<p id="imstr"></p>

<script>   
            document.getElementById("imstr").innerText=localStorage.getItem("imname"); 

 </script>

</body>
</html>

I want my list to be viewed like this .

Issue 2: Can you please also suggest an alternative of localstorage to call webpage 2 from first webpage.

Answer 1

You can set selected value for select tag by

document.getElementById("ImSelect").value = localStorage.getItem("imname");

To alter localstorage you can pass by query string

window.open("s2.html?imname=LB_1_000566");

And use

const urlParams = new URLSearchParams(window.location.search); urlParams.get('imname');

 <!DOCTYPE html> <html> <body> <select id="ImSelect" size="6" onchange"getvalue()"> <option value="LB_1_000561">LB_1_000561</option> <option value="LB_1_000562">LB_1_000562</option> <option value="LB_1_000563">LB_1_000563</option> <option value="LB_1_000564">LB_1_000564</option> <option value="LB_1_000565">LB_1_000565</option> <option value="LB_1_000566">LB_1_000566</option> <option value="LB_1_000567">LB_1_000567</option> <option value="LB_1_000568">LB_1_000568</option> <option value="LB_1_000569">LB_1_000569</option> <option value="LB_1_000570">LB_1_000570</option> <option value="LB_1_000571">LB_1_000571</option> <option value="LB_1_000572">LB_1_000572</option> <option value="LB_1_000573">LB_1_000573</option> </select> <p id="imstr"></p> <script> document.getElementById("imstr").innerText='LB_1_000566'; document.getElementById("ImSelect").value = 'LB_1_000566'; </script> </body> </html>

Highlight selected item in javascript

Question

1 answers

solution1
1 2019-07-23 13:53:55

Highlight selected item in javascript

Question

1 answers

solution1 1 2019-07-23 13:53:55

solution1
1 2019-07-23 13:53:55