Passing a JavaScript variable to a html <select> attribute

Question

I am trying to pass a variable from JavaScript to value attribute of the select tag. Here is my code:

<script>

 if (window.location.href.substring(0, 9) === "http://ww") {
     var home_var = "bing.com";
     var home_var = "poem.com";
 } else if (window.location.href.substring(0, 9) === "https://p") {
     var home_var = "https://px.multiscreensite.com/index.php?url=bing.com";
     var poem_var = "https://px.multiscreensite.com/index.php?url=poem.com";
 } else {
     var home_var = "1";
     var_poem_var = "2";
 }
 console.log(home_var);

</script>

<select OnChange="window.location.href=this.value">
   <option>Tagged Stuff and Navigation</option>
   <option value=HOME_VAR>Home Page</option>
</select>

Javascript variables can't be used directly in HTML, what you probably want is a proper event handler. — adeneo
– adeneo, Commented Jun 20, 2016 at 22:56
@TimoSta When selecting the "Home Page" option instead of going to bing.com or px.multiscreensite.com/index.php?url=bing.com is goes to bing.com/home_var or px.multiscreensite.com/home_var. — Aaron Quitta
– Aaron Quitta, Commented Jun 20, 2016 at 23:01

earl3s · Accepted Answer · 2016-06-29 05:26:59Z

1

If you add the SELECT after in javascript you can achieve this:

<select id="mySelect" OnChange="window.location.href=this.value">
    <option>Tagged Stuff and Navigation</option>
</select>

<script>
    if (window.location.href.substring(0,9) === "http://ww") {
    var home_var = "bing.com";    
    }
    else if (window.location.href.substring(0,9) === "https://p") {
    var home_var = "https://px.multiscreensite.com/index.php?url=bing.com";
    }
    else {
    var home_var = "1";
    }
    var select= document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = "Hope Page";
    option.value = home_var;
    select.add(option);
    console.log(home_var);
</script>

JS Fiddle https://jsfiddle.net/emfvyhq2/

edited Jun 29, 2016 at 5:26

answered Jun 20, 2016 at 23:05

earl3s

2,3731 gold badge23 silver badges25 bronze badges

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

6 Comments

Aaron Quitta Over a year ago

This appears to work for me but I will personally have to fidle with it a little before giving a definitive answer, thank you!

earl3s Over a year ago

No problem. In this situation you'll need to make sure the javascript runs after the DOM loads.

Aaron Quitta Over a year ago

Sorry this probably sounds stupid but, what is the DOM and how does it apply?

earl3s Over a year ago

The Document Object Model. If you ran this code locally at it's working for you then you don't have to worry about it. :)

Aaron Quitta Over a year ago

Because in its current form it does not work. The select statement need to be before the JavaScript. So currently this gives errors, and therefore is not completely correct.

|

kirinthos · Accepted Answer · 2016-06-20 23:04:20Z

1

you could add the element dynamically...

<script>
(function() {
    var s = document.getElementById("selector");
    var o = document.createElement("option");
    o.innerHTML = "Home Page";
    o.value = home_var;
    s.appendChild(o);
})();
</script>

<select id="selector" OnChange="window.location.href=this.value">    
    <option>Tagged Stuff and Navigation</option> 
</select>

answered Jun 20, 2016 at 23:04

kirinthos

4522 silver badges9 bronze badges

8 Comments

Aaron Quitta Over a year ago

Sorry I wasn't more clear above. That would work but I am trying to do this on a larger scale let me edit my question.

kirinthos Over a year ago

it will scale, make that a proper function and pass in text and value arguments to the function to create the option element

Aaron Quitta Over a year ago

Sorry i'm not great at this could you do that for me? Sorry.

kirinthos Over a year ago

I'm sorry I cannot, you must use the tools available to you. look at my function, how could you add two arguments to it named 'text' and 'value', then how would you change the statements in that function to use those new values? how do you call that function in your code instead of using variables for every value? edit if you have trouble you may ask more questions

kirinthos Over a year ago

there are only 3 things you need to do edit if you are still having trouble after a time, I'll help you through the answer and I can give you some good documentation on JavaScript if you would like

|

Hector Barbossa · Accepted Answer · 2016-06-20 23:06:14Z

0

Are you looking for something like

function changeLink(val) {
   if(val === 'HOME_VAR'){
     ... your code logic ...
   }
}

 <select onchange="javascript:changeLink(this.value)">
       <option>Tagged Stuff and Navigation</option>
       <option value="HOME_VAR">Home Page</option>
 </select>

answered Jun 20, 2016 at 23:06

Hector Barbossa

5,53813 gold badges51 silver badges70 bronze badges

3 Comments

Aaron Quitta Over a year ago

I don't understand the point of 'changeLink' or how it is soppused to work exactly.

Hector Barbossa Over a year ago

Here changeLink is a javascript function tied to the onchange event. So this function will execute every time you change the selection. As we are passing this.value to this function you will also have access to the selected option's value. Now if the selected option matches with HOME_VAR you can perform your logic. I am not exactly sure about the requirement here though.

Aaron Quitta Over a year ago

What do you mean by "the requirement here"?

Collectives™ on Stack Overflow

Passing a JavaScript variable to a html <select> attribute

3 Answers 3

6 Comments

8 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

8 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related