0

I'm in the middle of the process to create a very simple tool that allows my group to select a conference place. I'm getting some issues and hope I can receive some suggestions and help from you.

I have a dropdown menu, it allows user to select the conference location and it will display in text. For example:

HTML

<select onchange="changed('list_1')" id="list_1" class="travel" />
    <option selected disabled>Select Place</option>
    <option value="New York">New York</option>
    <option value="Pennsylvania"> Pennsylvania</option>
    <option value="Boston">Boston</option>
    <option value="Washigton DC">Washigton DC</option>
</select>

JavaScript

function changed(listId) {
    var list = document.getElementById(listId);
    document.getElementById("val_"+listId).innerHTML = list.value;
}
document.getElementById("val_list_1").innerHTML = document.getElementById("list_1").value;

Below is the output I am looking for:

You select New York as the conference location. Please make sure you confirm with supervisor before you attend the conference in New York.

When selecting "New York", the value is successfully displayed between You select "Value" as the conference location. Unfortunately because document.getElementById can only be used once, so I'm unable to get the same value "New York" to output in the second sentence.

I was wondering if any of you can show me an example or give me some ideas of how I can select the value only once from dropdown but the value will display in multiple areas?

Any help would be greatly appreciated

Coding Newbie
  • 23
  • 4
  • I did not get your problem correctly. But my question is why dont you move the line which is outside to inside changed method. – rajesh Jan 29 '17 at 18:50
  • Your opening `select` tag has a closing slash in it. I also can't see any elements with an ID like `val_list_`. Please create a reproducible example of your issue. – James Monger Jan 29 '17 at 18:51
  • are you not using jquery? – user3775217 Jan 29 '17 at 18:52
  • More or less the same question: http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript – ThisClark Jan 29 '17 at 18:59

3 Answers3

0

Well, first off you are mistaken about only being able to use document.getElementById once, there is no such restrictions and I have no idea why you would think there was.

That said, the way to get the value and then use it more than once is to store it in a variable.

Paul
  • 35,689
  • 11
  • 93
  • 122
0

Fix the opening tag so it is not self closing. Also change the onchange function to take this as an argument, referring to itself.

<select onchange="changed(this)" id="list_1" class="travel">

Rewrite the changed function to include any select as a parameter. You may refer to the value of the select element with its value property. This property is reusable as many times as you desire. Store it in a variable if you prefer. Example:

function changed(select) {
  console.log('Visiting ' + select.value + '? Enjoy your trip to ' + select.value + '.');
}
<select onchange="changed(this)" id="list_1" class="travel" >
    <option selected disabled>Select Place</option>
    <option value="New York">New York</option>
    <option value="Pennsylvania"> Pennsylvania</option>
    <option value="Boston">Boston</option>
    <option value="Washigton DC">Washigton DC</option>
</select>
ThisClark
  • 14,352
  • 10
  • 69
  • 100
0

You don't have a limit of using the value of an element, here is a simple solution to your problem :

Use a simple template for the text you want to display :

var textTemplate = 'You select {CITY} as the conference location. Please make sure you confirm with supervisor before you attend the conference in {CITY}.';
function changed(list_id){
    var cityName = document.getElementById(list_id).value;
    document.getElementById('outputTest').innerHTML = textTemplate.split('{CITY}').join(cityName);
}

this suppose you have an html code like :

<select onchange="changed('list_1')" id="list_1" class="travel" />
<option selected disabled>Select Place</option>
<option value="New York">New York</option>
<option value="Pennsylvania"> Pennsylvania</option>
<option value="Boston">Boston</option>
<option value="Washigton DC">Washigton DC</option>
</select>
<p id="outputTest"></p>
mrbm
  • 2,164
  • 12
  • 11